Il riquadro Copertura in Chrome DevTools può aiutarti a trovare JavaScript e il codice CSS. Rimuovere il codice non utilizzato può accelerare il caricamento della pagina e salvare i dati mobili degli utenti.
Panoramica
La spedizione di JavaScript o CSS inutilizzati è un problema comune nello sviluppo web. Ad esempio, supponi di voler utilizzare il componente Pulsante di bootstrap. sulla tua pagina. Per utilizzare il componente Pulsante, devi aggiungere un link a Il foglio di stile del bootstrap nel codice HTML, in questo modo:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
Questo foglio di stile non include soltanto il codice per il componente Pulsante. it contiene il codice CSS per tutti i componenti di Bootstrap. ma non utilizzi qualsiasi altro componente di Bootstrap. La vostra pagina sta scaricando una serie CSS di cui non ha bisogno. Questo CSS aggiuntivo costituisce un problema per quanto segue: motivi:
- Il codice aggiuntivo rallenta il caricamento della pagina. Consulta CSS di blocco del rendering.
- Se un utente accede alla pagina da un dispositivo mobile, il codice aggiuntivo esaurisce i propri dati mobili.
Apri il riquadro Copertura
- Apri il menu dei comandi.
Inizia a digitare
coverage, seleziona il comando Mostra copertura e poi premi Invio per eseguire il comando. Il riquadro Copertura si apre in il riquadro a scomparsa.
Registra la copertura del codice
Per acquisire la copertura del codice:
Per impostare l'ambito della copertura, nella barra delle azioni nella parte superiore del riquadro Copertura seleziona Per funzione o Per blocco dall'elenco a discesa.
Per avviare la registrazione, fai clic su Aggiorna Avvia strumentazione della copertura e ricarica la pagina Il riquadro Copertura ricarica la pagina, acquisisce il codice necessario per caricarla e continua la registrazione mentre interagisci con la pagina.
Per interrompere la registrazione della copertura del codice, fai clic su stop_circle Interrompi strumentazione della copertura e mostra i risultati.
Analizza la copertura del codice
La tabella nel riquadro Copertura mostra quali risorse sono state analizzate e la quantità di codice utilizzata all'interno di ciascuna risorsa.
Fai clic su una riga per aprire la risorsa nel riquadro Origini e visualizzare un'analisi riga per riga del codice e del codice inutilizzati. Le righe di codice inutilizzate sono contrassegnate da linee rosse accanto alla colonna con i numeri di riga sulla sinistra.
- La colonna URL è l'URL della risorsa che è stata analizzata.
- La colonna Tipo indica se la risorsa contiene CSS, JavaScript, o entrambe le cose.
- La colonna byte totali indica la dimensione totale della risorsa in byte.
- La colonna Utenti inutilizzati indica il numero di byte non utilizzati.
- L'ultima colonna senza nome mostra i byte totali e Colonne Unused Bytes. La sezione rossa della barra è composta da byte inutilizzati. La nella sezione grigia i byte sono utilizzati.
Per filtrare il report in base all'URL, specificalo nel filtro nella barra delle azioni.
La barra di stato nella parte inferiore del riquadro Copertura mostra la percentuale di codice utilizzata. La barra di stato tiene conto dei filtri.
Nell'elenco a discesa accanto alla barra dei filtri, puoi selezionare Tutti oppure solo CSS o JavaScript da visualizzare nel report.
Per includere il codice dell'estensione nel report, attiva la check_box Script di contenuti.
Per esportare il report, fai clic su Scarica Esporta copertura.