Code Coverage testa ogni selettore in ogni foglio di stile leggibile rispetto alla pagina live, in modo da poter vedere quali regole CSS attualmente non corrispondono a nulla, quanti byte spreca ciascun file e quali script stanno trattenendo la prima vernice.
I fogli di stile crescono solo. Un tema arriva con regole per le pagine che non hai, un framework fornisce componenti che non usi mai e tre riprogettazioni successive nessuno è sicuro di quale metà del file sia portante. Il risultato è un CSS che costa a ogni visitatore larghezza di banda e tempo di rendering per fornire regole che la pagina non può utilizzare.
Code Coverage lo misura direttamente. Esamina ogni regola in ogni foglio di stile che il browser gli consentirà di leggere, comprese le regole annidate all'interno delle query multimediali, i blocchi @supports e @layer, e testa ogni selettore rispetto al DOM live. Una regola che non corrisponde a nulla in questo momento viene segnalata come inutilizzata, per file, con una percentuale, i byte sprecati e l'elenco completo di selettori che è possibile espandere e copiare.
È attento alle trappole evidenti. Gli pseudo-elementi e le pseudo-classi di stato vengono rimossi prima della corrispondenza, quindi una regola :hover o ::before viene giudicata in base all'esistenza del suo selettore di base anziché essere cancellata erroneamente. I fogli di stile forniti multiorigine senza intestazioni CORS non possono essere letti da nessuno script, quindi vengono contrassegnati come illeggibili invece di essere conteggiati silenziosamente come perfetti. E poiché la scansione riflette la pagina così com'è in quel momento, le regole per menu, schede e finestre modali che non sono ancora aperte sembreranno inutilizzate, quindi aprile e premi Nuova scansione prima di eliminare qualsiasi cosa.
La scheda JavaScript risponde a una domanda diversa: peso e blocco. Esegue l'inventario di ogni script caricato dalla pagina con le sue dimensioni di trasferimento, il tempo di download e se è asincrono, differito, un modulo, caricato dinamicamente o che mantiene la prima vernice, quindi totalizza il numero di byte che stanno bloccando. Non viene deliberatamente venduto come copertura dell'esecuzione: sapere quali righe JavaScript vengono eseguite richiede l'API del debugger di Chrome, che DevSuite Pro non richiede, quindi nulla qui pretende di essere un report a livello di riga.
Ogni regola in ogni foglio di stile leggibile viene testata rispetto al DOM live, comprese le regole all'interno delle query multimediali, i blocchi @supports e @layer, non stimati dai nomi o dalle dimensioni dei file.
Ogni foglio di stile riceve una percentuale inutilizzata, un conteggio delle regole usate rispetto a quelle non usate e il numero di byte sprecati, ordinati in modo che il peggiore trasgressore sia in cima.
Espandi qualsiasi file per leggere i selettori che non corrispondono a nulla, quindi copiali come blocco CSS per lavorarci nel tuo editor o consegnarli a un compagno di squadra.
Gli pseudo-elementi e le pseudo-classi di stato come :hover e :focus-with vengono rimossi prima della corrispondenza, quindi le regole interattive vengono giudicate equamente invece di essere cancellate.
Ogni script elencato con le sue dimensioni, il tempo di download e se è asincrono, differito, un modulo, caricato dinamicamente o blocca la prima vernice, oltre ai byte di blocco totali.
I fogli di stile multiorigine illeggibili vengono contrassegnati anziché contrassegnati e la scheda JS dice chiaramente che misura il peso, non le linee eseguite. Nessun numero inventato.
Un tema acquistato fornisce CSS per dozzine di layout demo. Scopri quanto di esso non viene mai utilizzato dal tuo sito e riduci il file con prove anziché congetture.
Controlla quanto di un framework CSS sopravvive su un modello reale e se la tua configurazione di eliminazione o scuotimento degli alberi sta facendo quello che pensi che sia.
Elenca gli script che bloccano il rendering, con le relative dimensioni, e decidi cosa rinviare, dividere o eliminare per visualizzare prima i contenuti sullo schermo.
Entra con i numeri: quali file sprecano più byte, quanto JavaScript sta bloccando e dove la prima ora di lavoro ripaga di più.
Prendendo il controllo di un sito che non hai creato, leggi rapidamente quanto dei suoi CSS e JavaScript guadagna ancora il suo posto.
Fare clic sull'icona Code Coverage nel dock DevSuite Pro. La scansione viene eseguita immediatamente e segnala quante regole sono state controllate e quale parte di esse non viene utilizzata.
La riga superiore fornisce il conteggio dei fogli di stile, le regole totali, la percentuale inutilizzata e i byte sprecati. I file seguenti sono ordinati in base a quanto sprecano.
Fai clic su mostra selettori inutilizzati su qualsiasi file per leggere esattamente quali regole non corrispondono a nulla in questa pagina.
Apri menu, schede, fisarmoniche e modalità, quindi premi Nuova scansione. Le regole i cui elementi esistono solo in quegli stati passeranno da inutilizzato a utilizzato: esegui sempre questa operazione prima di eliminare.
Copia i selettori inutilizzati ti dà un blocco CSS su cui lavorare; Export JSON copia il report completo, incluso l'inventario JavaScript, per un ticket o un documento di controllo.
Installa DevSuite Pro gratuitamente e sblocca più di 71 strumenti per sviluppatori per il tuo browser.
