Code Coverage test elke selector in elke leesbare stylesheet met de live-pagina, zodat je kunt zien welke CSS-regels momenteel met niets overeenkomen, hoeveel bytes elk bestand verspilt en welke scripts de eerste verf tegenhouden.
Stylesheets groeien alleen maar. Er komt een thema met regels voor pagina's die je niet hebt, een raamwerk levert componenten die je nooit gebruikt, en drie herontwerpen later weet niemand zeker welke helft van het bestand dragend is. Het resultaat is CSS die elke bezoeker bandbreedte en rendertijd kost om regels te leveren die de pagina niet kan gebruiken.
Code Coverage meet dat direct. Het doorloopt elke regel in elk stylesheet dat de browser hem laat lezen - inclusief regels die zijn genest in mediaquery's, @supports- en @layer-blokken - en test elke selector aan de hand van de live DOM. Een regel die op dit moment niets oplevert, wordt gerapporteerd als ongebruikt, per bestand, met een percentage, de verspilde bytes en de volledige lijst met selectors die u kunt uitvouwen en kopiëren.
Het is voorzichtig met de voor de hand liggende valkuilen. Pseudo-elementen en status-pseudo-klassen worden gestript voordat ze overeenkomen, dus een :hover- of ::before-regel wordt beoordeeld op basis van de vraag of de basisselector bestaat, in plaats van dat deze ten onrechte wordt afgeschreven. Stylesheets die cross-origineel worden aangeboden zonder CORS-headers kunnen door geen enkel script worden gelezen, dus worden ze gemarkeerd als onleesbaar in plaats van stilzwijgend als perfect te worden beschouwd. En omdat de scan de pagina weergeeft zoals deze op dat moment is, zien de regels voor menu's, tabbladen en modaliteiten die nog niet geopend zijn er ongebruikt uit. Open ze dus en druk op Opnieuw scannen voordat u iets verwijdert.
Het tabblad JavaScript beantwoordt een andere vraag: gewicht en blokkering. Het inventariseert elk script dat de pagina laadt met de overdrachtsgrootte, de downloadtijd en of het asynchroon, uitgesteld, een module, dynamisch geladen of eerste verf is, en telt vervolgens op hoeveel bytes er worden geblokkeerd. Het wordt met opzet niet verkocht als uitvoeringsdekking. Om te weten welke JavaScript-regels zijn uitgevoerd, is de debugger-API van Chrome vereist, waar DevSuite Pro niet om vraagt, dus niets hier pretendeert een rapport op regelniveau te zijn.
Elke regel in elk leesbaar stylesheet wordt getest aan de hand van de live DOM, inclusief regels in mediaquery's, @supports en @layer-blokken - niet geschat op basis van bestandsnamen of -groottes.
Elke stylesheet krijgt een ongebruikt percentage, een telling van gebruikte versus ongebruikte regels en het aantal verspilde bytes, zo gesorteerd dat de ergste overtreder bovenaan staat.
Vouw elk bestand uit om de selectors te lezen die met niets overeenkomen en kopieer ze vervolgens als een CSS-blok om door te werken in uw editor of om aan een teamgenoot te geven.
Pseudo-elementen en status-pseudo-klassen zoals :hover en :focus-within worden verwijderd voordat ze overeenkomen, zodat interactieve regels eerlijk worden beoordeeld in plaats van te worden afgeschreven.
Elk script wordt vermeld met zijn grootte, downloadtijd en of het asynchroon, uitgesteld, een module, dynamisch geladen of blokkerende eerste verf is - plus het totale aantal blokkerende bytes.
Onleesbare cross-origin stylesheets worden gemarkeerd in plaats van gescoord, en op het JS-tabblad staat duidelijk dat het gewicht meet, niet welke regels worden uitgevoerd. Geen verzonnen getallen.
Een gekocht thema levert CSS voor tientallen demo-indelingen. Kijk hoeveel ervan uw site nooit gebruikt en beperk het bestand met bewijsmateriaal in plaats van met giswerk.
Controleer hoeveel van een CSS-framework overleeft op een echte sjabloon, en of uw opschonings- of boomschudconfiguratie doet wat u denkt dat het is.
Maak een lijst van de scripts die de weergave tegenhouden, met hun grootte, en beslis wat u wilt uitstellen, splitsen of laten vallen om inhoud eerder op het scherm te krijgen.
Kom binnen met cijfers: welke bestanden verspillen de meeste bytes, hoeveel JavaScript blokkeert en waar het eerste uur werken het meeste oplevert.
Als u een site overneemt die u niet zelf heeft gebouwd, kunt u snel lezen hoeveel van de CSS en JavaScript nog steeds hun plaats verdienen.
Klik op het pictogram Codedekking in het DevSuite Pro-dock. De scan wordt onmiddellijk uitgevoerd en rapporteert hoeveel regels er zijn gecontroleerd en welk deel daarvan ongebruikt is.
De bovenste rij geeft u het aantal stylesheets, het totale aantal regels, het ongebruikte percentage en de verspilde bytes. De onderstaande bestanden zijn gerangschikt op hoeveel ze verspillen.
Klik op ongebruikte selectors weergeven in een willekeurig bestand om precies te lezen welke regels op deze pagina met niets overeenkomen.
Open menu's, tabbladen, accordeons en modals en druk vervolgens op Opnieuw scannen. Regels waarvan de elementen alleen in die staten bestaan, gaan van ongebruikt naar gebruikt. Doe dit altijd voordat u ze verwijdert.
Door ongebruikte selectors te kopiëren, krijgt u een CSS-blok om doorheen te werken; Export JSON kopieert het volledige rapport, inclusief de JavaScript-inventaris, voor een ticket of een auditdocument.
Installeer DevSuite Pro gratis en ontgrendel 71+ ontwikkelaarstools voor uw browser.
