Pokrytí kódu testuje každý selektor v každé čitelné šabloně stylů proti živé stránce, takže můžete vidět, která pravidla CSS aktuálně nic neodpovídají, kolik bajtů každý soubor plýtvá a které skripty zdržují první malování.
Styly pouze rostou. Přichází téma s pravidly pro stránky, které nemáte, framework dodává komponenty, které nikdy nepoužíváte, a po třech redesignech si nikdo není jistý, která polovina souboru je nosná. Výsledkem je CSS, které každého návštěvníka stojí šířku pásma a čas vykreslování, aby doručil pravidla, která stránka nemůže použít.
Pokrytí kódu to přímo měří. Prochází každé pravidlo v každé šabloně stylů, kterou prohlížeč nechá číst – včetně pravidel vnořených do mediálních dotazů, @podpor a bloků @vrstvy – a testuje každý selektor proti živému DOM. Pravidlo, které momentálně nic neodpovídá, je hlášeno jako nepoužité, na soubor, s procentem, plýtváním bajtů a úplným seznamem selektorů, které můžete rozbalit a zkopírovat.
Dává pozor na zjevné pasti. Pseudoprvky a stavové pseudotřídy jsou před párováním odstraněny, takže pravidlo :hover nebo ::before je posuzováno podle toho, zda jeho základní selektor existuje, spíše než aby bylo nesprávně odepsáno. Šablony stylů podávané napříč původem bez záhlaví CORS nelze číst žádným skriptem, takže jsou označeny jako nečitelné místo toho, aby byly tiše považovány za dokonalé. A protože skenování odráží stránku tak, jak je v daném okamžiku, pravidla pro nabídky, karty a modály, které ještě nejsou otevřené, budou vypadat jako nepoužívaná – takže je otevřete a stiskněte Znovu prohledat, než cokoli odstraníte.
Karta JavaScript odpovídá na jinou otázku: váhu a blokování. Inventarizuje každý skript, který stránka načte, s jeho přenosovou velikostí, dobou stahování a tím, zda je asynchronní, odložený, modul, načítán dynamicky nebo zdržuje první malování, a pak sečte, kolik bajtů blokuje. Záměrně se neprodává jako pokrytí provádění – vědět, které řádky JavaScriptu běžely, vyžaduje ladicí API prohlížeče Chrome, které DevSuite Pro nepožaduje, takže zde nic nepředstírá, že jde o zprávu na úrovni řádků.
Každé pravidlo v každé čitelné šabloně stylů je testováno proti živému modelu DOM, včetně pravidel v dotazech na média, @podporách a blokech @vrstvy – neodhadnuto z názvů souborů nebo velikostí.
Každá šablona stylů dostane nevyužité procento, počet použitých a nepoužitých pravidel a počet promarněných bajtů, seřazených tak, aby byl nejhorší pachatel na vrcholu.
Rozbalte libovolný soubor, abyste si přečetli selektory, které se ničemu neshodují, a poté je zkopírujte jako blok CSS pro práci v editoru nebo předejte spoluhráči.
Pseudoprvky a stavové pseudotřídy jako :hover a :focus-within jsou před spárováním odstraněny, takže interaktivní pravidla jsou posuzována spravedlivě, místo aby byla odepisována.
U každého skriptu je uvedena jeho velikost, doba stahování a zda je asynchronní, odložený, modul, dynamicky načtený nebo blokující první malování – plus celkový počet blokovacích bajtů.
Nečitelné šablony stylů z různých zdrojů jsou označeny, nikoli bodovány, a karta JS jasně říká, že měří váhu, nikoli to, které řádky byly provedeny. Žádná vymyšlená čísla.
Zakoupené téma dodává CSS pro desítky ukázkových rozvržení. Podívejte se, kolik z toho vaše stránky nikdy nevyužijí, a ořízněte soubor pomocí důkazů, nikoli odhadů.
Zkontrolujte, jak velká část rámce CSS přežije na skutečné šabloně a zda vaše konfigurace čištění nebo otřásání stromů dělá to, co si myslíte, že je.
Uveďte skripty, které zdržují vykreslování, s jejich velikostmi a rozhodněte se, co odložit, rozdělit nebo vypustit, aby se obsah dostal na obrazovku dříve.
Projděte si čísla: které soubory plýtvají nejvíce bajty, jak moc JavaScript blokuje a kde se první hodina práce nejvíce vyplatí.
Převezmete-li web, který jste nevytvořili, rychle si přečtěte, kolik z jeho CSS a JavaScriptu si stále zaslouží své místo.
Klikněte na ikonu Pokrytí kódu v doku DevSuite Pro. Kontrola se spustí okamžitě a hlásí, kolik pravidel zkontrolovala a jaký podíl z nich je nevyužit.
V horním řádku je uveden počet šablon stylů, celková pravidla, nevyužité procento a promarněné bajty. Soubory níže jsou seřazeny podle toho, kolik plýtvají.
Klikněte na zobrazit nepoužívané selektory u libovolného souboru a přečtěte si přesně, která pravidla neodpovídají ničemu na této stránce.
Otevřete nabídky, karty, akordeony a modály a stiskněte Znovu prohledat. Pravidla, jejichž prvky existují pouze v těchto stavech, se přesunou z nepoužívaných na používané – vždy to udělejte před odstraněním.
Kopírování nepoužitých selektorů vám poskytne blok CSS, se kterým můžete pracovat; Export JSON zkopíruje úplnou sestavu, včetně inventáře JavaScriptu, pro tiket nebo dokument auditu.
Nainstalujte si DevSuite Pro zdarma a odemkněte 71+ vývojářských nástrojů pro svůj prohlížeč.
