Code Coverage testar varje väljare i varje läsbar stilmall mot livesidan, så att du kan se vilka CSS-regler som för närvarande inte matchar något, hur många byte varje fil slösar bort och vilka skript som håller upp första färgen.
Stilmallar bara växer. Ett tema kommer med regler för sidor du inte har, ett ramverk skickar komponenter du aldrig använder, och tre omdesigner senare är ingen säker på vilken halva av filen som är bärande. Resultatet är CSS som kostar varje besökare bandbredd och renderingstid för att leverera regler som sidan inte kan använda.
Code Coverage mäter som direkt. Den går igenom varje regel i varje formatmall som webbläsaren låter den läsa – inklusive regler som är kapslade i mediafrågor, @supports och @layer-block – och testar varje väljare mot live-DOM. En regel som inte matchar någonting just nu rapporteras som oanvänd, per fil, med en procentandel, bortkastade byte och hela listan med väljare som du kan expandera och kopiera.
Det är noga med de uppenbara fällorna. Pseudoelement och tillståndspseudoklasser tas bort innan matchning, så en :hover- eller ::before-regel bedöms utifrån om dess basväljare existerar snarare än att den skrivs av felaktigt. Stilmallar som levereras med kors ursprung utan CORS-rubriker kan inte läsas av något skript, så de flaggas som oläsliga istället för att i tysthet räknas som perfekta. Och eftersom skanningen återspeglar sidan som den är i det ögonblicket kommer regler för menyer, flikar och modaler som inte är öppna ännu att se oanvända ut - så öppna dem och tryck på Sök igen innan du tar bort något.
JavaScript-fliken svarar på en annan fråga: vikt och blockering. Den inventerar varje skript som sidan laddar med dess överföringsstorlek, dess nedladdningstid, och om det är asynkront, uppskjutet, en modul, laddat dynamiskt eller håller upp första färgen, och summerar sedan hur många byte som blockerar. Det säljs medvetet inte som exekveringstäckning – att veta vilka JavaScript-rader som körde kräver Chromes debugger-API, vilket DevSuite Pro inte begär, så ingenting här låtsas vara en rapport på radnivå.
Varje regel i varje läsbar stilmall testas mot live-DOM, inklusive regler i mediefrågor, @supports och @layer-block – inte uppskattade utifrån filnamn eller storlekar.
Varje stilmall får en outnyttjad procentandel, ett antal använda kontra oanvända regler och antalet bortkastade byte, sorterade så att den värsta förövaren är överst.
Expandera vilken fil som helst för att läsa de väljare som inte matchar något, kopiera dem sedan som ett CSS-block att arbeta igenom i din redigerare eller lämna till en lagkamrat.
Pseudoelement och tillståndspseudoklasser som :hover och :focus-within tas bort innan matchning, så interaktiva regler bedöms rättvist istället för att avskrivas.
Varje skript listat med dess storlek, nedladdningstid och om det är asynkront, uppskjutet, en modul, dynamiskt laddat eller blockerande första färg - plus det totala antalet blockerande bytes.
Oläsbara formatmallar med kors ursprung flaggas istället för poäng, och JS-fliken säger tydligt att den mäter vikten, inte vilka rader som körs. Inga påhittade siffror.
Ett köpt tema skickar CSS för dussintals demolayouter. Se hur mycket av det din webbplats aldrig använder och skär ner filen med bevis snarare än gissningar.
Kontrollera hur mycket av ett CSS-ramverk som överlever på en riktig mall och om din rensnings- eller trädskakningskonfiguration gör vad du tror att den är.
Lista skripten som håller uppe renderingen, med deras storlekar, och bestäm vad du ska skjuta upp, dela eller släppa för att få innehåll på skärmen tidigare.
Gå in med siffror: vilka filer slösar bort flest byte, hur mycket JavaScript blockerar och var den första timmen av arbete lönar sig mest.
När du tar över en webbplats som du inte har byggt kan du snabbt läsa om hur mycket av dess CSS och JavaScript som fortfarande tjänar sin plats.
Klicka på kodtäckningsikonen i DevSuite Pro-dockan. Skanningen körs omedelbart och rapporterar hur många regler den kontrollerade och vilken andel av dem som är oanvända.
Den översta raden ger dig stilmallsantal, totala regler, oanvänd procentandel och bortkastade byte. Filerna nedan är sorterade efter hur mycket de slösar.
Klicka på visa oanvända väljare på en fil för att läsa exakt vilka regler som inte matchar något på den här sidan.
Öppna menyer, flikar, dragspel och modaler och tryck sedan på Re-scan. Regler vars element bara finns i dessa tillstånd kommer att flyttas från oanvända till använda - gör alltid detta innan du tar bort.
Kopiera oanvända väljare ger dig ett CSS-block att arbeta igenom; Export JSON kopierar hela rapporten, inklusive JavaScript-inventeringen, för en biljett eller ett revisionsdokument.
Installera DevSuite Pro gratis och lås upp 71+ utvecklarverktyg för din webbläsare.
