A Code Coverage minden olvasható stíluslapon minden választót tesztel az élő oldalon, így láthatja, hogy jelenleg mely CSS-szabályok nem egyeznek semmivel, hány bájtot pazarolnak el az egyes fájlok, és mely szkriptek tartják fel az első festést.
A stíluslapok csak nőnek. Megérkezik a téma szabályokkal azokra az oldalakra, amelyekkel nem rendelkezik, a keretrendszer olyan összetevőket szállít, amelyeket soha nem használ, és három újratervezés után senki sem tudja biztosan, hogy a fájl melyik fele teherbíró. Az eredmény a CSS, amely minden látogató sávszélességébe és renderelési idejébe kerül az oldal által nem használható szabályok megjelenítéséhez.
A kódlefedettség közvetlenül méri. Minden szabályt végigjár minden stíluslapon, amelyet a böngésző olvasni hagy – beleértve a médialekérdezésekbe ágyazott szabályokat, a @supports és @layer blokkokat is –, és minden szelektort tesztel az élő DOM-mal. A jelenleg semminek nem megfelelő szabályt a rendszer nem használtként jelenti, fájlonként, százalékos értékkel, az elpazarolt bájtokkal, valamint a kibontható és másolható kiválasztók teljes listájával.
Óvatos a nyilvánvaló csapdákkal kapcsolatban. A pszeudoelemek és az állapot-pszeudoosztályok az egyeztetés előtt lecsupaszodnak, így a :hover vagy ::before szabályt a rendszer az alapján ítéli meg, hogy az alapkiválasztója létezik-e, nem pedig tévesen írták le. A CORS-fejlécek nélküli, több eredetű stíluslapokat egyetlen szkript sem tudja elolvasni, ezért a rendszer olvashatatlanként jelöli meg őket, ahelyett, hogy csendben tökéletesnek számítaná őket. És mivel a vizsgálat az adott pillanatban tükrözi az oldalt, a még meg nem nyitott menükre, lapokra és módokra vonatkozó szabályok használaton kívülinek tűnnek – tehát nyissa meg őket, és nyomja meg az Újrakeresés gombot, mielőtt bármit törölne.
A JavaScript lap egy másik kérdésre ad választ: súly és blokkolás. Leltároz minden olyan szkriptet, amelyet az oldal betölt, annak átviteli méretével, letöltési idejével, valamint azzal, hogy aszinkron, késleltetett, modul, dinamikusan töltődik be, vagy feltartja az első festéket, majd összesíti, hogy hány bájt blokkol. Szándékosan nem adják el végrehajtási lefedettségként – annak ismeretéhez, hogy mely JavaScript-sorok futottak, szükség van a Chrome hibakereső API-jára, amelyet a DevSuite Pro nem kér, így itt semmi sem úgy tesz, mintha sorszintű jelentés lenne.
Minden olvasható stíluslapban minden szabályt az élő DOM-mal szemben tesztelnek, beleértve a médialekérdezéseken belüli szabályokat, a @supports és a @layer blokkokat – amelyeket nem a fájlnevekből vagy a méretekből becsülnek meg.
Minden stíluslap megkap egy fel nem használt százalékot, a használt kontra fel nem használt szabályszámot és az elpazarolt bájtok számát, úgy rendezve, hogy a legrosszabb szabálysértő kerüljön a tetejére.
Bontsa ki a fájlokat, hogy elolvassa a semminek sem megfelelő kiválasztókat, majd másolja át őket CSS-blokkként, hogy a szerkesztőjében vagy csapattársának átdolgozhassa.
A pszeudoelemeket és az állapotállapot-osztályokat, mint például a :hover és :focus-in belül, az egyeztetés előtt lecsupaszítják, így az interaktív szabályokat igazságosan ítélik meg ahelyett, hogy leírnák őket.
Minden szkript fel van sorolva a méretével, a letöltési idejével és azzal, hogy aszinkron, késleltetett, modul, dinamikusan betöltött vagy blokkoló első festék – plusz a teljes blokkoló bájt.
Az olvashatatlan, több eredetű stíluslapokat pontozás helyett megjelölik, és a JS lap egyértelműen azt mondja, hogy a súlyt méri, nem pedig a végrehajtott sorokat. Nincsenek kitalált számok.
A megvásárolt témát több tucat bemutató elrendezéshez szállítjuk a CSS-hez. Tekintse meg, hogy webhelye mennyit használ soha, és találgatások helyett bizonyítékokkal vágja le a fájlt.
Ellenőrizze, hogy a CSS-keretrendszer mekkora része marad fenn egy valódi sablonon, és hogy a törlési vagy farázó konfigurációja azt csinálja-e, amit Ön gondol.
Sorolja fel a megjelenítést feltartó szkripteket méretükkel együtt, és döntse el, hogy mit halaszt, ossza fel vagy dobjon el, hogy a tartalom hamarabb megjelenjen a képernyőn.
Lépjen be a számokkal: mely fájlok pazarolják a legtöbb bájtot, mennyi JavaScript blokkol, és hol térül meg a legjobban az első óra munka.
Ha átvesz egy olyan webhelyet, amelyet nem épített fel, gyorsan olvassa el, hogy a CSS-ből és a JavaScriptből mennyi nyeri még el a helyét.
Kattintson a Code Coverage ikonra a DevSuite Pro dokkban. A vizsgálat azonnal lefut, és jelenti, hogy hány szabályt ellenőrzött, és ezek mekkora része nem használt.
A felső sor a stíluslapok számát, az összes szabályt, a fel nem használt százalékot és az elpazarolt bájtokat tartalmazza. Az alábbi fájlok az elpazarolt mennyiség szerint vannak rendezve.
Kattintson a nem használt szelektorok megjelenítése bármely fájlnál elemre, hogy pontosan megtudja, mely szabályok egyeznek semmivel ezen az oldalon.
Nyissa meg a menüket, lapokat, harmonikákat és modálokat, majd nyomja meg az Újrakeresés gombot. Azok a szabályok, amelyek elemei csak ezekben az állapotokban léteznek, a használaton kívülről a használtra változnak – mindig tegye ezt a törlés előtt.
A fel nem használt szelektorok másolása egy CSS-blokkot ad, amelyet át kell dolgozni; A JSON exportálása átmásolja a teljes jelentést, beleértve a JavaScript-leltárt is, egy jegyhez vagy egy audit dokumentumhoz.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 71+ fejlesztői eszközt böngészőjéhez.
