Code Coverage testează fiecare selector din fiecare foaie de stil care poate fi citită cu pagina live, astfel încât să puteți vedea care reguli CSS nu se potrivesc în prezent cu nimic, câți octeți irosește fiecare fișier și ce scripturi rețin prima vopsire.
Foile de stil cresc doar. O temă sosește cu reguli pentru paginile pe care nu le aveți, un cadru oferă componente pe care nu le utilizați niciodată și trei reproiectări mai târziu nimeni nu este sigur care jumătate din fișier este încărcată. Rezultatul este CSS care costă fiecare vizitator lățimea de bandă și timpul de randare pentru a oferi reguli pe care pagina nu le poate folosi.
Acoperirea codului măsoară direct. Acesta parcurge fiecare regulă din fiecare foaie de stil pe care browser-ul o va lăsa să citească - inclusiv regulile imbricate în interogări media, blocuri @supports și @layer - și testează fiecare selector cu DOM-ul live. O regulă care nu se potrivește cu nimic în acest moment este raportată ca neutilizată, pe fișier, cu un procent, octeții irosiți și lista completă de selectori pe care o puteți extinde și copia.
Este atent la capcanele evidente. Pseudo-elementele și pseudo-clasele de stare sunt eliminate înainte de potrivire, astfel încât o regulă :hover sau ::before este judecată dacă selectorul său de bază există, mai degrabă decât să fie anulat greșit. Foile de stil difuzate cu origini încrucișate fără anteturi CORS nu pot fi citite de niciun script, așa că sunt marcate ca fiind ilizibile în loc să fie considerate în tăcere ca perfecte. Și pentru că scanarea reflectă pagina așa cum este în acel moment, regulile pentru meniuri, file și modal care nu sunt deschise încă vor părea neutilizate - așa că deschideți-le și apăsați Re-scanați înainte de a șterge ceva.
Fila JavaScript răspunde la o altă întrebare: greutate și blocare. Evidențiază fiecare script pe care îl încarcă pagina cu dimensiunea de transfer, timpul de descărcare și dacă este asincron, amânat, un modul, încărcat dinamic sau ținând apăsat prima vopsea, apoi totalizează câți octeți blochează. Nu este vândut în mod deliberat ca acoperire de execuție - a ști ce linii JavaScript au rulat necesită API-ul de depanare Chrome, pe care DevSuite Pro nu îl solicită, așa că nimic aici nu pretinde a fi un raport la nivel de linie.
Fiecare regulă din fiecare foaie de stil care poate fi citită este testată în raport cu DOM-ul live, inclusiv regulile din interiorul interogărilor media, blocurile @supports și @layer - nu sunt estimate din numele sau dimensiunile fișierelor.
Fiecare foaie de stil primește un procent nefolosit, un număr de reguli utilizate versus neutilizate și numărul de octeți irosiți, sortați astfel încât cel mai rău infractor să fie în partea de sus.
Extindeți orice fișier pentru a citi selectoarele care nu se potrivesc cu nimic, apoi copiați-le ca bloc CSS pentru a le rezolva în editor sau înmânați-le unui coechipier.
Pseudo-elementele și pseudo-clasele de stat, cum ar fi :hover și :focus-within sunt eliminate înainte de potrivire, astfel încât regulile interactive sunt judecate corect în loc să fie eliminate.
Fiecare script este listat cu dimensiunea, timpul de descărcare și dacă este asincron, amânat, un modul, încărcat dinamic sau blocând prima vopsea - plus octeții totale de blocare.
Foile de stil care nu pot fi citite cu origini încrucișate sunt marcate mai degrabă decât punctate, iar fila JS spune clar că măsoară greutatea, nu liniile executate. Fără numere inventate.
O temă achiziționată livrează CSS pentru zeci de machete demonstrative. Vedeți cât de mult nu folosește niciodată site-ul dvs. și reduceți fișierul cu dovezi, mai degrabă decât cu presupuneri.
Verificați cât de mult dintr-un cadru CSS supraviețuiește pe un șablon real și dacă configurația dvs. de curățare sau tree-shaking face ceea ce credeți că este.
Enumerați scripturile care împiedică randarea, cu dimensiunile lor și decideți ce să amânați, să împărțiți sau să renunțați pentru a obține conținutul pe ecran mai devreme.
Intrați cu numere: ce fișiere irosesc cei mai mulți octeți, cât de mult blochează JavaScript și unde prima oră de lucru dă cel mai bine.
Preluând un site pe care nu l-ați construit, citiți rapid cât de mult din CSS și JavaScript își câștigă încă locul.
Faceți clic pe pictograma Acoperire cod din dock-ul DevSuite Pro. Scanarea rulează imediat și raportează câte reguli a verificat și ce cotă dintre ele este neutilizată.
Rândul de sus vă oferă numărul de foi de stil, regulile totale, procentul neutilizat și octeții irosiți. Fișierele de mai jos sunt ordonate în funcție de cât risipă.
Faceți clic pe Afișați selectorii neutilizați pe orice fișier pentru a citi exact ce reguli nu se potrivesc cu nimic pe această pagină.
Deschideți meniuri, file, acordeoane și modale, apoi apăsați Re-scanați. Regulile ale căror elemente există doar în acele stări se vor muta de la nefolosit la utilizat - faceți întotdeauna acest lucru înainte de a le șterge.
Copierea selectoarelor neutilizate vă oferă un bloc CSS pe care să îl rezolvați; Export JSON copie raportul complet, inclusiv inventarul JavaScript, pentru un bilet sau un document de audit.
Instalează DevSuite Pro gratuit și deblochează peste 71 de instrumente pentru dezvoltatori în browserul tău.
