Code Coverage pārbauda katru atlasītāju katrā lasāmajā stila lapā, salīdzinot ar tiešraides lapu, lai jūs varētu redzēt, kuri CSS noteikumi pašlaik neatbilst nevienam, cik baitu katrs fails iztērē un kuri skripti aiztur pirmo krāsu.
Stila lapas tikai aug. A theme arrives with rules for pages you do not have, a framework ships components you never use, and three redesigns later nobody is sure which half of the file is load-bearing. Rezultāts ir CSS, kas katram apmeklētājam maksā joslas platumu un renderēšanas laiku, lai nodrošinātu kārtulas, kuras lapa nevar izmantot.
Code Coverage mēra, kas tieši. It walks every rule in every stylesheet the browser will let it read — including rules nested inside media queries, @supports and @layer blocks — and tests each selector against the live DOM. A rule that matches nothing right now is reported as unused, per file, with a percentage, the wasted bytes, and the full list of selectors you can expand and copy.
Tas ir uzmanīgs pret acīmredzamajiem slazdiem. Pseidoelementi un stāvokļa pseidoklases tiek noņemti pirms atbilstības noteikšanas, tāpēc noteikums :hover vai ::befor tiek novērtēts pēc tā, vai tā bāzes atlasītājs pastāv, nevis tiek nepareizi norakstīts. Stila lapas, kas tiek rādītas vairākās izcelsmes vietās bez CORS galvenēm, nevar nolasīt ar nevienu skriptu, tāpēc tās tiek atzīmētas kā nelasāmas, nevis klusi tiek uzskatītas par perfektām. Un tā kā skenēšana atspoguļo lapu tādu, kāda tā ir tajā brīdī, noteikumi par izvēlnēm, cilnēm un modāliem, kas vēl nav atvērti, izskatīsies neizmantoti — tāpēc atveriet tos un nospiediet Atkārtoti skenēt, pirms kaut ko dzēsāt.
JavaScript cilne atbild uz citu jautājumu: svars un bloķēšana. Tajā tiek uzskaitīts katrs skripts, ko lapa ielādē, norādot tā pārsūtīšanas lielumu, lejupielādes laiku un to, vai tas ir asinhrons, atlikts, modulis, ielādēts dinamiski vai aiztur pirmo krāsu, un pēc tam kopā nosaka, cik baitu bloķē. Tas apzināti netiek pārdots kā izpildes pārklājums — lai zinātu, kuras JavaScript rindas tika palaists, ir nepieciešama Chrome atkļūdotāja API, kuru DevSuite Pro nepieprasa, tāpēc nekas šeit neizliekas par rindas līmeņa pārskatu.
Katrs noteikums katrā lasāmajā stilu lapā tiek pārbaudīts attiecībā pret reāllaika DOM, tostarp noteikumiem multivides vaicājumos, @supports un @layer blokos — netiek aprēķināts pēc failu nosaukumiem vai izmēriem.
Katra stila lapa saņem neizmantoto procentuālo daļu, izmantoto un neizmantoto kārtulu skaitu un izšķērdēto baitu skaitu, kas sakārtoti tā, lai vissliktākais pārkāpējs būtu augšpusē.
Izvērsiet jebkuru failu, lai izlasītu atlasītājus, kas neatbilst nevienam, pēc tam kopējiet tos kā CSS bloku, lai tos apstrādātu savā redaktorā vai komandas biedram.
Pseidoelementi un stāvokļa pseidoklases, piemēram, :hover un :focus-within, tiek noņemti pirms atbilstības noteikšanas, tāpēc interaktīvie noteikumi tiek novērtēti godīgi, nevis tiek norakstīti.
Katrs skripts ir norādīts ar tā lielumu, lejupielādes laiku un to, vai tas ir asinhrons, atlikts, modulis, dinamiski ielādēts vai bloķē pirmo krāsu — plus kopējais bloķēšanas baiti.
Nelasāmas vairāku izcelsmes stilu lapas tiek atzīmētas, nevis novērtētas, un cilnē JS ir skaidri norādīts, ka tā mēra svaru, nevis izpildītās rindas. Nav izdomātu skaitļu.
Iegādāts motīvs piegādā CSS desmitiem demonstrācijas izkārtojumu. Skatiet, cik daudz no tā jūsu vietne nekad neizmanto, un samaziniet failu, izmantojot pierādījumus, nevis minējumus.
Pārbaudiet, cik liela daļa CSS ietvaru saglabājas, izmantojot reālu veidni, un vai jūsu tīrīšanas vai koku satricināšanas konfigurācija dara to, ko jūs domājat.
Uzskaitiet skriptus, kas kavē renderēšanu, norādot to izmērus un izlemiet, ko atlikt, sadalīt vai atmest, lai saturs tiktu parādīts ekrānā ātrāk.
Ievadiet skaitļus: kuri faili iztērē visvairāk baitu, cik daudz JavaScript bloķē un kur pirmā darba stunda atmaksājas visvairāk.
Pārņemot vietni, kuru neesat izveidojis, ātri izlasiet, cik liela daļa no tās CSS un JavaScript joprojām iegūst savu vietu.
Noklikšķiniet uz ikonas Code Coverage DevSuite Pro dokā. Skenēšana tiek palaista nekavējoties un ziņo, cik kārtulu tā pārbaudīja un kāda daļa no tām ir neizmantota.
Augšējā rindā ir norādīts stila lapas skaits, kopējais kārtulu skaits, neizmantotais procents un izšķērdētie baiti. Tālāk esošie faili ir sakārtoti pēc iztērētā daudzuma.
Noklikšķiniet uz rādīt neizmantotos atlasītājus jebkurā failā, lai precīzi izlasītu, kuri noteikumi šajā lapā neatbilst neko.
Atveriet izvēlnes, cilnes, akordeonus un modālus, pēc tam nospiediet Atkārtoti skenēt. Kārtulas, kuru elementi pastāv tikai šajos stāvokļos, pāries no neizmantotiem uz lietotiem — vienmēr dariet to pirms dzēšanas.
Kopējot neizmantotos atlasītājus, varat izmantot CSS bloku; Eksportēt JSON biļetei vai audita dokumentam kopē pilnu pārskatu, tostarp JavaScript krājumus.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 71+ izstrādātāju rīkus savam pārlūkam.
