Pokrytie kódu testuje každý selektor v každej čitateľnej šablóne so štýlmi v porovnaní so živou stránkou, takže môžete vidieť, ktoré pravidlá CSS momentálne ničomu nezodpovedajú, koľko bajtov každý súbor stráca a ktoré skripty zdržujú prvé maľovanie.
Šablóny štýlov len rastú. Prichádza téma s pravidlami pre stránky, ktoré nemáte, rámec dodáva komponenty, ktoré nikdy nepoužívate, a po troch prepracovaniach si nikto nie je istý, ktorá polovica súboru je nosná. Výsledkom je CSS, ktoré každého návštevníka stojí šírku pásma a čas vykreslenia na doručenie pravidiel, ktoré stránka nemôže použiť.
Pokrytie kódu meria, že priamo. Prechádza každé pravidlo v každej šablóne so štýlmi, ktorú prehliadač nechá čítať – vrátane pravidiel vnorených do mediálnych dopytov, @supports a @layer blokov – a testuje každý selektor oproti živému DOM. Pravidlo, ktoré sa momentálne ničomu nezhoduje, sa nahlási ako nepoužité, na súbor, s percentom, zbytočnými bajtami a úplným zoznamom selektorov, ktoré môžete rozšíriť a skopírovať.
Dáva si pozor na zjavné pasce. Pseudoprvky a stavové pseudotriedy sa pred zhodou odstránia, takže pravidlo :hover alebo ::before sa posudzuje skôr podľa toho, či jeho základný selektor existuje, než aby sa nesprávne odpísalo. Šablóny so štýlmi podávané krížovo bez hlavičiek CORS nemožno prečítať žiadnym skriptom, takže sú označené ako nečitateľné namiesto toho, aby boli ticho považované za dokonalé. A keďže skenovanie odráža stránku takú, aká je v danom okamihu, pravidlá pre ponuky, karty a modály, ktoré ešte nie sú otvorené, budú vyzerať ako nepoužité – takže ich otvorte a pred odstránením čohokoľvek stlačte tlačidlo Znova skenovať.
Karta JavaScript odpovedá na inú otázku: hmotnosť a blokovanie. Inventarizuje každý skript, ktorý stránka načíta, s jeho prenosovou veľkosťou, časom sťahovania a či je asynchrónny, odložený, modul, načítaný dynamicky alebo zdržujúci prvé vyfarbenie, potom spočíta, koľko bajtov je blokovaných. Zámerne sa nepredáva ako pokrytie vykonávania – vedieť, ktoré riadky JavaScriptu boli spustené, vyžaduje ladiace rozhranie API prehliadača Chrome, ktoré DevSuite Pro nepožaduje, takže nič tu nepredstiera, že ide o správu na úrovni riadkov.
Každé pravidlo v každej čitateľnej šablóne so štýlmi je testované proti živému modelu DOM, vrátane pravidiel v mediálnych dopytoch, @podporách a blokoch @vrstvy – neodhadnuté z názvov alebo veľkostí súborov.
Každá šablóna so štýlmi dostane nepoužité percento, počet použitých a nepoužitých pravidiel a počet zbytočných bajtov, zoradené tak, aby bol najhorší páchateľ na vrchole.
Rozbaľte ľubovoľný súbor, aby ste si prečítali selektory, ktoré sa ničomu nezhodujú, a potom ich skopírujte ako blok CSS, aby ste s nimi mohli pracovať v editore alebo odovzdať spoluhráčovi.
Pseudoprvky a stavové pseudotriedy ako :hover a :focus-within sa pred zhodou odstránia, takže interaktívne pravidlá sa posudzujú spravodlivo namiesto toho, aby boli odpísané.
Každý skript je uvedený s jeho veľkosťou, časom sťahovania a tým, či je asynchrónny, odložený, modul, dynamicky načítaný alebo blokujúci prvé vyfarbenie – plus celkový počet blokujúcich bajtov.
Nečitateľné šablóny so štýlmi z rôznych zdrojov sú skôr označené ako bodované a karta JS jasne hovorí, že meria váhu, nie to, ktoré riadky sa vykonali. Žiadne vymyslené čísla.
Zakúpená téma dodáva CSS pre desiatky ukážkových rozložení. Zistite, koľko z toho vaša stránka nikdy nepoužíva, a namiesto dohadov zrežte súbor dôkazmi.
Skontrolujte, koľko z rámca CSS prežije na skutočnej šablóne a či vaša konfigurácia čistenia alebo otrasov stromov robí to, čo si myslíte.
Uveďte skripty, ktoré bránia vykresľovaniu, s ich veľkosťami a rozhodnite sa, čo odložiť, rozdeliť alebo zahodiť, aby sa obsah dostal na obrazovku skôr.
Choďte s číslami: ktoré súbory míňajú najviac bajtov, koľko JavaScript blokuje a kde sa prvá hodina práce najviac oplatí.
Ak prevezmete stránku, ktorú ste nevytvorili, rýchlo si prečítajte, koľko z jej CSS a JavaScriptu si stále zarába svoje miesto.
Kliknite na ikonu Pokrytie kódu v doku DevSuite Pro. Kontrola sa spustí okamžite a oznámi, koľko pravidiel skontrolovala a aký podiel z nich je nevyužitých.
V hornom riadku nájdete počet šablón so štýlmi, celkové pravidlá, nevyužité percento a premárnené bajty. Súbory nižšie sú zoradené podľa množstva odpadu.
Kliknite na zobraziť nepoužívané selektory na ľubovoľnom súbore a prečítajte si, ktoré pravidlá sa na tejto stránke nezhodujú.
Otvorte ponuky, karty, akordeóny a modály a potom stlačte tlačidlo Znova skenovať. Pravidlá, ktorých prvky existujú iba v týchto stavoch, sa presunú z nepoužívaných na používané – vždy to urobte pred odstránením.
Kopírovanie nepoužívaných selektorov vám poskytne blok CSS, s ktorým môžete pracovať; Export JSON skopíruje celú zostavu vrátane inventára JavaScriptu pre lístok alebo dokument auditu.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 71 vývojárskych nástools pre váš prehliadač.
