Pokritost kode preizkusi vsak izbirnik v vsaki berljivi slogovni tabeli glede na stran v živo, tako da lahko vidite, katera pravila CSS se trenutno ne ujemajo z ničemer, koliko bajtov vsaka datoteka zapravi in kateri skripti zadržujejo prvo barvo.
Liste slogov samo rastejo. Tema prispe s pravili za strani, ki jih nimate, ogrodje pošlje komponente, ki jih nikoli ne uporabljate, in tri preoblikovanja pozneje nihče ni prepričan, katera polovica datoteke je nosilna. Rezultat je CSS, ki vsakega obiskovalca stane pasovne širine in časa upodabljanja za dostavo pravil, ki jih stran ne more uporabiti.
Code Coverage to neposredno meri. Sprehodi se po vsakem pravilu v vsaki slogovni tabeli, ki mu jo brskalnik dovoli prebrati – vključno s pravili, ugnezdenimi znotraj medijskih poizvedb, blokov @supports in @layer – in preizkusi vsak izbirnik glede na DOM v živo. Pravilo, ki se trenutno ne ujema z ničemer, se poroča kot neuporabljeno, na datoteko, z odstotkom, izgubljenimi bajti in celotnim seznamom izbirnikov, ki jih lahko razširite in kopirate.
Previden je pri očitnih pasteh. Psevdoelementi in psevdorazredi stanja so pred ujemanjem odstranjeni, tako da se pravilo :hover ali ::before presodi glede na to, ali njegov osnovni izbirnik obstaja, namesto da bi bilo napačno odpisano. Liste slogov, postrežene z navzkrižnim izvorom brez glav CORS, ni mogoče prebrati z nobenim skriptom, zato so označene kot neberljive, namesto da bi bile tiho štete kot popolne. In ker skeniranje odraža stran, kakršna je v tistem trenutku, bodo pravila za menije, zavihke in modale, ki še niso odprti, videti neuporabljena — zato jih odprite in pritisnite Ponovno skeniraj, preden kar koli izbrišete.
Zavihek JavaScript odgovarja na drugo vprašanje: teža in blokiranje. Popiše vsak skript, ki ga naloži stran, z velikostjo prenosa, časom prenosa in ali je asinhron, odložen, modul, se nalaga dinamično ali zadrži prvo barvo, nato pa sešteje, koliko bajtov blokira. Namenoma se ne prodaja kot pokritost izvajanja – če veste, katere vrstice JavaScript so se izvajale, potrebujete Chromeov API za odpravljanje napak, ki ga DevSuite Pro ne zahteva, zato se tukaj nič ne pretvarja, da je poročilo na ravni vrstice.
Vsako pravilo v vsaki berljivi slogovni tabeli je preizkušeno glede na DOM v živo, vključno s pravili znotraj medijskih poizvedb, blokov @supports in @layer — ni ocenjeno na podlagi imen ali velikosti datotek.
Vsaka tabela slogov dobi neuporabljen odstotek, štetje uporabljenih proti neuporabljenim pravilom in število izgubljenih bajtov, razvrščenih tako, da je najhujši kršitelj na vrhu.
Razširite katero koli datoteko, da preberete izbirnike, ki se ne ujemajo z ničemer, nato pa jih kopirajte kot blok CSS, da jih obdelate v svojem urejevalniku ali predate soigralcu.
Psevdoelementi in psevdorazredi stanja, kot sta :hover in :focus-within, so pred ujemanjem odstranjeni, tako da so interaktivna pravila pravično ocenjena, namesto da bi bila odpisana.
Vsak skript je naveden z njegovo velikostjo, časom prenosa in tem, ali je asinhron, odložen, modul, dinamično naložen ali blokira prvo barvanje — plus skupni bajti blokiranja.
Neberljive slogovne datoteke navzkrižnega izvora so označene in ne ocenjene, zavihek JS pa jasno pravi, da meri težo, ne pa, katere vrstice so bile izvedene. Brez izmišljenih številk.
Kupljena tema pošilja CSS za desetine predstavitvenih postavitev. Poglejte, koliko tega vaše spletno mesto nikoli ne uporabi, in zmanjšajte datoteko z dokazi namesto z ugibanji.
Preverite, koliko ogrodja CSS preživi na resnični predlogi in ali vaša konfiguracija za čiščenje ali pretresanje drevesa dela to, kar mislite, da je.
Navedite skripte, ki zadržujejo upodabljanje, z njihovimi velikostmi in se odločite, kaj odložiti, razdeliti ali izpustiti, da bo vsebina prej prikazana na zaslonu.
Sprehodite se s številkami: katere datoteke zapravijo največ bajtov, koliko JavaScripta blokira in kje se prva ura dela najbolj izplača.
Če prevzamete spletno mesto, ki ga niste zgradili, si na hitro preberite, koliko CSS-ja in JavaScripta še vedno zasluži svoje mesto.
Kliknite ikono Pokritost kode v doku DevSuite Pro. Pregled se zažene takoj in sporoči, koliko pravil je preveril in kolikšen delež je neuporabljenih.
V zgornji vrstici je prikazano število stilov, skupna pravila, neporabljeni odstotek in zapravljeni bajti. Datoteke spodaj so razvrščene po tem, koliko zapravijo.
Kliknite prikaži neuporabljene izbirnike na kateri koli datoteki, da natančno preberete, katera pravila se ne ujemajo z ničemer na tej strani.
Odprite menije, zavihke, harmonike in modale, nato pritisnite Ponovno skeniraj. Pravila, katerih elementi obstajajo samo v teh stanjih, se bodo premaknila iz neuporabljenih v uporabljena — to vedno storite pred brisanjem.
Kopiranje neuporabljenih izbirnikov vam daje blok CSS, s katerim lahko delate; Izvoz JSON kopira celotno poročilo, vključno z inventarjem JavaScript, za vstopnico ali revizijski dokument.
Namestite DevSuite Pro brezplačno in odklenite več kot 71 orodij za razvijalce za svoj brskalnik.
