Code Coverage tester hver vælger i hvert læsbart stylesheet mod live-siden, så du kan se, hvilke CSS-regler der i øjeblikket ikke matcher noget, hvor mange bytes hver fil spilder, og hvilke scripts der holder den første maling op.
Stylesheets vokser kun. Der kommer et tema med regler for sider, du ikke har, et framework sender komponenter, du aldrig bruger, og tre redesigns senere er ingen sikker på, hvilken halvdel af filen der er bærende. Resultatet er CSS, der koster hver besøgende båndbredde og giver tid til at levere regler, som siden ikke kan bruge.
Code Coverage måler det direkte. Den gennemgår alle regler i hvert typografiark, som browseren lader den læse - inklusive regler indlejret i medieforespørgsler, @supports og @layer-blokke - og tester hver vælger mod den levende DOM. En regel, der ikke matcher noget lige nu, rapporteres som ubrugt, pr. fil, med en procentdel, de spildte bytes og den fulde liste over vælgere, du kan udvide og kopiere.
Den er forsigtig med de åbenlyse fælder. Pseudo-elementer og tilstands-pseudo-klasser fjernes før matchning, så en :hover- eller ::before-regel bedømmes på, om dens basevælger eksisterer i stedet for at blive afskrevet forkert. Stylesheets, der serveres med krydsoprindelse uden CORS-overskrifter, kan ikke læses af noget script, så de markeres som ulæselige i stedet for at blive regnet som perfekte. Og fordi scanningen afspejler siden, som den er på det tidspunkt, vil regler for menuer, faner og modaler, der endnu ikke er åbne, se ubrugte ud - så åbn dem og tryk på Genscan, før du sletter noget.
JavaScript-fanen besvarer et andet spørgsmål: vægt og blokering. Det inventarer hvert script siden indlæser med dets overførselsstørrelse, dets downloadtid, og om det er asynkront, udskudt, et modul, indlæst dynamisk eller holder den første maling oppe, og tæller derefter, hvor mange bytes der blokerer. Det sælges bevidst ikke som eksekveringsdækning - at vide, hvilke JavaScript-linjer der kørte, kræver Chromes debugger API, som DevSuite Pro ikke anmoder om, så intet her foregiver at være en rapport på linjeniveau.
Hver regel i hvert læsbart stylesheet testes i forhold til den levende DOM, inklusive regler inde i medieforespørgsler, @supports og @layer-blokke - ikke estimeret ud fra filnavne eller størrelser.
Hvert stylesheet får en ubrugt procentdel, et antal brugte versus ubrugte regler og antallet af spildte bytes, sorteret så den værste lovovertræder er øverst.
Udvid enhver fil for at læse de vælgere, der ikke matcher noget, og kopier dem derefter som en CSS-blok til at arbejde igennem i din editor eller overdrage dem til en holdkammerat.
Pseudo-elementer og tilstands-pseudo-klasser såsom :hover og :focus-within fjernes før matchning, så interaktive regler bedømmes retfærdigt i stedet for at blive afskrevet.
Hvert script er angivet med dets størrelse, downloadtid og om det er asynkront, udskudt, et modul, dynamisk indlæst eller blokerende første maling - plus det samlede antal blokerende bytes.
Ulæselige stylesheets med krydsoprindelse markeres snarere end scores, og JS-fanen siger klart, at den måler vægt, ikke hvilke linjer der udføres. Ingen opfundne tal.
Et købt tema sender CSS til snesevis af demolayouts. Se, hvor meget af det dit websted aldrig bruger, og skær filen ned med bevis i stedet for gætværk.
Tjek, hvor meget af et CSS-framework, der overlever på en rigtig skabelon, og om din rense- eller trærystende konfiguration gør, hvad du tror, den er.
List de scripts, der holder gengivelsen, med deres størrelser, og beslut, hvad du vil udsætte, opdele eller droppe for at få indhold på skærmen hurtigere.
Gå ind med tal: Hvilke filer spilder flest bytes, hvor meget JavaScript blokerer, og hvor den første times arbejde betaler sig mest.
Når du overtager et websted, du ikke har bygget, kan du hurtigt læse, hvor meget af dets CSS og JavaScript stadig tjener sin plads.
Klik på ikonet Kodedækning i DevSuite Pro-dockingstationen. Scanningen kører med det samme og rapporterer, hvor mange regler den har tjekket, og hvilken andel af dem, der er ubrugt.
Den øverste række giver dig stylesheetantal, samlede regler, den ubrugte procentdel og de spildte bytes. Nedenstående filer er sorteret efter, hvor meget de spilder.
Klik på vis ubrugte vælgere på en fil for at læse præcis, hvilke regler der ikke matcher noget på denne side.
Åbn menuer, faner, harmonikaer og modaler, og tryk derefter på Re-scan. Regler, hvis elementer kun findes i disse stater, vil flytte fra ubrugte til brugte - gør dette altid før sletning.
Kopier ubrugte vælgere giver dig en CSS-blok at arbejde igennem; Eksporter JSON kopierer hele rapporten, inklusive JavaScript-beholdningen, til en billet eller et revisionsdokument.
Installer DevSuite Pro gratis og lås op for 71+ udviklerværktøjer til din browser.
