Pokrivenost koda testira svaki selektor u svakoj čitljivoj tablici stilova u odnosu na stranicu uživo, tako da možete vidjeti koja CSS pravila trenutno ne odgovaraju ničemu, koliko bajtova troši svaka datoteka i koje skripte zadržavaju prvo bojanje.
Listovi stilova samo rastu. Tema stiže s pravilima za stranice koje nemate, framework isporučuje komponente koje nikada ne koristite, a tri redizajna kasnije nitko nije siguran koja je polovica datoteke nosiva. Rezultat je CSS koji košta svakog posjetitelja propusnost i vrijeme renderiranja za isporuku pravila koja stranica ne može koristiti.
Code Coverage to izravno mjeri. Prolazi svako pravilo u svakoj tablici stilova koju mu preglednik dopusti čitati — uključujući pravila ugniježđena unutar medijskih upita, @supports i @layer blokova — i testira svaki selektor u odnosu na živi DOM. Pravilo koje trenutno ne odgovara ničemu prijavljuje se kao neiskorišteno, po datoteci, s postotkom, izgubljenim bajtovima i punim popisom selektora koje možete proširiti i kopirati.
Pazi na očite zamke. Pseudo-elementi i pseudo-klase stanja uklanjaju se prije podudaranja, tako da se pravilo :hover ili ::before procjenjuje na temelju toga postoji li njegov osnovni selektor, a ne da se pogrešno otpiše. Stilske tablice koje se poslužuju iz drugog izvora bez CORS zaglavlja ne mogu se čitati nijednom skriptom, pa su označene kao nečitljive umjesto da se tiho računaju kao savršene. A budući da skeniranje odražava stranicu kakva jest u tom trenutku, pravila za izbornike, kartice i modale koji još nisu otvoreni izgledat će neiskorišteni — stoga ih otvorite i pritisnite Ponovno skeniraj prije nego što bilo što izbrišete.
Kartica JavaScript odgovara na drugo pitanje: težina i blokiranje. Popisuje svaku skriptu koju stranica učitava s njezinom veličinom prijenosa, vremenom preuzimanja i je li asinkrona, odgođena, modul, učitava se dinamički ili zadržava prvo crtanje, a zatim zbraja koliko bajtova blokira. Namjerno se ne prodaje kao pokriće izvršenja — saznanje o tome koji su JavaScript redovi pokrenuti zahtijeva Chromeov API za ispravljanje pogrešaka, koji DevSuite Pro ne zahtijeva, tako da se ovdje ništa ne pretvara da je izvješće na razini retka.
Svako pravilo u svakoj čitljivoj tablici stilova testirano je u usporedbi s DOM-om uživo, uključujući pravila unutar medijskih upita, @supports i @layer blokova — ne procjenjuje se na temelju naziva ili veličina datoteka.
Svaka lista stilova dobiva neiskorišteni postotak, broj pravila za iskorišteno naspram neiskorištenog i broj izgubljenih bajtova, sortiranih tako da je najgori prekršitelj na vrhu.
Proširite bilo koju datoteku da biste pročitali birače koji ne odgovaraju ničemu, a zatim ih kopirajte kao CSS blok da biste ih obradili u uređivaču ili predali suigraču.
Pseudo-elementi i pseudo-klase stanja kao što su :hover i :focus-within uklanjaju se prije podudaranja, tako da se interaktivna pravila pravedno ocjenjuju umjesto da se otpisuju.
Svaka skripta navedena je s veličinom, vremenom preuzimanja i je li asinkrona, odgođena, modul, dinamički učitana ili blokira prvo slikanje — plus ukupni bajtovi blokiranja.
Nečitljive tablice stilova višeg podrijetla su označene, a ne bodovane, a kartica JS jasno kaže da mjeri težinu, a ne koji su redovi izvršeni. Bez izmišljenih brojeva.
Kupljena tema isporučuje CSS za desetke demo izgleda. Pogledajte koliko toga vaša stranica nikad ne koristi i smanjite datoteku dokazima umjesto nagađanjima.
Provjerite koliko CSS okvira preživi na stvarnom predlošku i radi li vaša konfiguracija čišćenja ili potresanja stabla ono što mislite.
Navedite skripte koje zadržavaju renderiranje, s njihovim veličinama i odlučite što odgoditi, podijeliti ili ispustiti da bi se sadržaj prije pojavio na zaslonu.
Uđite s brojevima: koje datoteke troše najviše bajtova, koliko JavaScripta blokira i gdje se prvi sat rada najviše isplati.
Preuzimajući web mjesto koje niste izgradili, brzo pročitajte koliko CSS-a i JavaScripta još uvijek zaslužuje svoje mjesto.
Kliknite ikonu Pokrivenost koda u DevSuite Pro docku. Skeniranje se odmah pokreće i javlja koliko je pravila provjerilo i koji je udio njih neiskorišten.
Gornji redak daje vam broj stilova, ukupna pravila, neiskorišteni postotak i potrošene bajtove. Datoteke ispod poredane su prema količini otpada.
Kliknite prikaži neiskorištene selektore na bilo kojoj datoteci kako biste točno pročitali koja pravila ne odgovaraju ničemu na ovoj stranici.
Otvorite izbornike, kartice, harmonike i modale, zatim pritisnite Ponovno skeniranje. Pravila čiji elementi postoje samo u tim stanjima premjestit će se iz neiskorištenih u iskorištene — to uvijek učinite prije brisanja.
Kopiraj neiskorištene selektore daje ti CSS blok za rad; Izvezi JSON kopira cijelo izvješće, uključujući JavaScript inventar, za kartu ili revizijski dokument.
Instalirajte DevSuite Pro besplatno i otključajte 71+ razvojnih alata za svoj preglednik.
