Code Coverage tester hver velger i hvert lesbart stilark mot live-siden, slik at du kan se hvilke CSS-regler som for øyeblikket ikke samsvarer med noe, hvor mange byte hver fil sløser med, og hvilke skript som holder opp første maling.
Stilark vokser bare. Et tema kommer med regler for sider du ikke har, et rammeverk sender komponenter du aldri bruker, og tre redesigns senere er ingen sikker på hvilken halvdel av filen som er bærende. Resultatet er CSS som koster hver besøkende båndbredde og gir tid til å levere regler siden ikke kan bruke.
Kode Dekning måler som direkte. Den følger hver regel i hvert stilark som nettleseren lar den lese – inkludert regler som er nestet inne i mediespørringer, @supports og @layer-blokker – og tester hver velger mot live DOM. En regel som ikke samsvarer med noe akkurat nå, rapporteres som ubrukt, per fil, med en prosentandel, de bortkastede bytene og hele listen over velgere du kan utvide og kopiere.
Den er forsiktig med de åpenbare fellene. Pseudo-elementer og tilstands-pseudo-klasser blir strippet før matching, så en :hover- eller ::before-regel bedømmes på om dens basevelger eksisterer i stedet for å være feilaktig avskrevet. Stilark servert med kryssopprinnelse uten CORS-overskrifter kan ikke leses av noe skript, så de blir flagget som uleselige i stedet for å bli regnet som perfekte. Og fordi skanningen gjenspeiler siden slik den er i det øyeblikket, vil regler for menyer, faner og modaler som ikke er åpne ennå se ubrukte ut – så åpne dem og trykk Skann på nytt før du sletter noe.
JavaScript-fanen svarer på et annet spørsmål: vekt og blokkering. Den inventarer hvert skript siden laster med overføringsstørrelse, nedlastingstid og om det er asynkront, utsatt, en modul, lastet dynamisk eller holder opp første maling, og teller deretter hvor mange byte som blokkerer. Den selges med vilje ikke som utførelsesdekning – å vite hvilke JavaScript-linjer som kjørte krever Chromes debugger API, som DevSuite Pro ikke ber om, så ingenting her later til å være en rapport på linjenivå.
Hver regel i hvert lesbart stilark blir testet mot live DOM, inkludert regler i mediespørringer, @supports og @layer-blokker – ikke estimert fra filnavn eller størrelser.
Hvert stilark får en ubrukt prosentandel, et antall brukt versus ubrukte regler og antall bortkastede byte, sortert slik at den verste lovbryteren er øverst.
Utvid en hvilken som helst fil for å lese velgerne som ikke samsvarer med noe, og kopier dem deretter som en CSS-blokk for å jobbe gjennom i redigeringsprogrammet eller gi til en lagkamerat.
Pseudo-elementer og tilstands-pseudo-klasser som :hover og :focus-within blir strippet før matching, så interaktive regler bedømmes rettferdig i stedet for å bli avskrevet.
Hvert skript er oppført med størrelse, nedlastingstid og om det er asynkront, utsatt, en modul, dynamisk lastet eller blokkerende første maling – pluss det totale antallet blokkeringsbytes.
Ulesbare stilark med kryssopprinnelse flagges i stedet for poeng, og JS-fanen sier tydelig at den måler vekt, ikke hvilke linjer som utføres. Ingen oppfunne tall.
Et kjøpt tema sender CSS for dusinvis av demo-oppsett. Se hvor mye av det nettstedet ditt aldri bruker, og kutt ned filen med bevis i stedet for gjetting.
Sjekk hvor mye av et CSS-rammeverk som overlever på en ekte mal, og om konfigurasjonen for rensing eller treristing gjør det du tror den er.
List opp skriptene som holder opp gjengivelsen, med deres størrelser, og bestem hva du skal utsette, dele eller slippe for å få innhold på skjermen raskere.
Gå inn med tall: hvilke filer som kaster bort flest byte, hvor mye JavaScript blokkerer, og hvor den første timen med arbeid lønner seg mest.
Når du overtar et nettsted du ikke har bygget, kan du raskt lese hvor mye av CSS og JavaScript som fortsatt tjener sin plass.
Klikk på kodedekning-ikonet i DevSuite Pro-dokken. Skanningen kjører umiddelbart og rapporterer hvor mange regler den har sjekket og hvor stor andel av dem som er ubrukt.
Den øverste raden gir deg antall stilark, totale regler, ubrukte prosentandeler og bortkastede byte. Filene nedenfor er sortert etter hvor mye de kaster bort.
Klikk vis ubrukte velgere på en fil for å lese nøyaktig hvilke regler som ikke samsvarer med noe på denne siden.
Åpne menyer, faner, trekkspill og modaler, og trykk deretter Re-scan. Regler hvis elementer bare eksisterer i disse statene vil flytte fra ubrukt til brukt - gjør alltid dette før du sletter.
Kopier ubrukte velgere gir deg en CSS-blokk å jobbe gjennom; Eksporter JSON kopierer hele rapporten, inkludert JavaScript-beholdningen, for en billett eller et revisjonsdokument.
Installer DevSuite Pro gratis og lås opp 71+ utviklerverktøy for nettleseren din.
