Il riquadro Copertura in Chrome DevTools può aiutarti a trovare il codice JavaScript e CSS inutilizzato. La rimozione del codice inutilizzato può velocizzare il caricamento della pagina e salvare i dati mobili degli utenti.
Panoramica
La spedizione di codice JavaScript o CSS inutilizzato è un problema comune nello sviluppo web. Ad esempio, supponi di voler utilizzare il componente pulsante di Bootstrap nella tua pagina. Per utilizzare il componente Pulsante, devi aggiungere un link al foglio di stile di 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 solo il codice per il componente del pulsante. Contiene il CSS per tutti i componenti di Bootstrap. Tuttavia, non stai utilizzando gli altri componenti di Bootstrap. La pagina sta scaricando un mazzo di CSS di cui non ha bisogno. Questo CSS aggiuntivo crea problemi per i seguenti motivi:
- Il codice aggiuntivo rallenta il caricamento della pagina. Consulta la sezione CSS per il blocco del rendering.
- Se un utente accede alla pagina da un dispositivo mobile, il codice aggiuntivo consuma i suoi dati mobili.
Apri il riquadro Copertura
- Apri il menu dei comandi.
Inizia a digitare
coverage, seleziona il comando Mostra copertura, quindi premi Invio per eseguire il comando. Il riquadro Copertura si apre nel Riquadro a scomparsa.
Registra copertura 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 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 copertura e mostra 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 corrispondente nel riquadro Origini e vedere un'analisi dettagliata per riga di codice utilizzato e codice inutilizzato. Le eventuali righe di codice inutilizzate sono contrassegnate da linee rosse accanto alla colonna con i numeri di riga a sinistra.
- La colonna URL corrisponde all'URL della risorsa analizzata.
- La colonna Tipo indica se la risorsa contiene CSS, JavaScript o entrambi.
- La colonna Byte totali indica la dimensione totale della risorsa in byte.
- La colonna Byte non utilizzati indica il numero di byte non utilizzati.
- L'ultima colonna senza nome mostra le colonne Byte totali e Byte inutilizzati. La sezione rossa della barra contiene i byte inutilizzati. La sezione in grigio contiene i byte 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 utilizzato. 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.