Il riquadro Copertura ti aiuta a trovare codice JavaScript e CSS non utilizzato. La rimozione del codice inutilizzato può velocizzare 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, supponiamo che tu voglia 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 del componente pulsante. Contiene il CSS per tutti i componenti di Bootstrap. ma non utilizzi nessun altro componente Bootstrap. Pertanto, la pagina scarica una serie di CSS che non le servono. Questo CSS aggiuntivo è un problema per i seguenti motivi:
- Il codice aggiuntivo rallenta il caricamento della pagina. Consulta la sezione CSS che bloccano il rendering.
- Se un utente accede alla pagina su un dispositivo mobile, il codice aggiuntivo utilizza i dati mobili.
Il riquadro Copertura ti consente di registrare la pagina e visualizzare un report dei byte totali utilizzati e non utilizzati delle risorse CSS e JavaScript, nonché di monitorare il codice nel riquadro Origini.
Apri il riquadro Copertura
- Apri DevTools.
- 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 nel riquadro a scomparsa.
In alternativa, nell'angolo in alto a destra, seleziona more_vert Altre opzioni > Altri strumenti > Copertura.
Registrare 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 sul pulsante Ricarica al centro del riquadro. Il riquadro Copertura ricarica la pagina, acquisisce il codice necessario per caricare la pagina e continua la registrazione mentre interagisci con la pagina.
Per interrompere la registrazione della copertura del codice, fai clic su Interrompi strumentazione della copertura e mostra risultati nella barra delle azioni del riquadro.
Analizzare la copertura del codice
La tabella nel riquadro Copertura mostra le risorse analizzate e la quantità di codice utilizzata in ciascuna risorsa.
Fai clic su una riga per aprire la risorsa nel riquadro Origini e visualizzare una suddivisione riga per riga del codice utilizzato e di quello inutilizzato. Le righe di codice inutilizzate sono contrassegnate da linee verticali grigie accanto alla colonna con i numeri di riga a sinistra.
- La colonna URL è l'URL della risorsa analizzata.
- La colonna Tipo indica se la risorsa contiene CSS, JavaScript o entrambi.
- La colonna Byte totali indica le dimensioni totali della risorsa in byte.
- La colonna Byte non utilizzati indica il numero di byte non utilizzati.
- La colonna Visualizzazione utilizzo è una visualizzazione delle colonne Byte totali e Byte non utilizzati. La sezione grigia della barra indica i byte non utilizzati. La sezione verde indica 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 utilizzata. La barra di stato tiene conto del filtro.
Accanto alla barra dei filtri, puoi selezionare Tutti, CSS o JavaScript dall'elenco a discesa da mostrare nel report.
Per includere il codice dell'estensione nel report, attiva Script di contenuti.
Per esportare il report, fai clic su Esporta copertura.