Le panneau Coverage (Couverture) vous aide à trouver le code JavaScript et CSS inutilisé. La suppression du code inutilisé peut accélérer le chargement de votre page et économiser les données mobiles de vos utilisateurs.
Présentation
L'expédition de code JavaScript ou CSS inutilisé est un problème courant dans le développement Web. Supposons par exemple que vous souhaitiez utiliser le composant de bouton de Bootstrap sur votre page. Pour utiliser le composant de bouton, vous devez ajouter un lien vers la feuille de style de Bootstrap dans votre code HTML, comme suit :
...
<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>
...
Cette feuille de style n'inclut pas uniquement le code du composant de bouton. Elle contient le code CSS de tous les composants de Bootstrap. Cependant, vous n'utilisez aucun des autres composants de Bootstrap. Votre page télécharge donc un grand nombre de fichiers CSS dont elle n'a pas besoin. Ce code CSS supplémentaire pose problème pour les raisons suivantes :
- Le code supplémentaire ralentit le chargement de votre page. Consultez CSS bloquant le rendu.
- Si un utilisateur accède à la page sur un appareil mobile, le code supplémentaire utilise ses données mobiles.
Le panneau Coverage (Couverture) vous permet d'enregistrer votre page et d'afficher un rapport sur le nombre total d'octets utilisés et inutilisés des ressources CSS et JavaScript, et de suivre le code dans le panneau Sources.
Ouvrir le panneau "Coverage"
- Accédez aux outils de développement.
- Ouvrez le menu Command (Commande).
Commencez à saisir
coverage, sélectionnez la commande Show Coverage (Afficher la couverture), puis appuyez sur Enter pour l'exécuter. Le panneau Coverage (Couverture) s'ouvre dans le tiroir.
Vous pouvez également sélectionner more_vert Plus d'options > Plus d'outils > Coverage (Couverture) en haut à droite.
Enregistrer la couverture de code
Pour capturer la couverture de code :
Pour définir le champ d'application de la couverture, dans la barre d'action en haut du panneau Coverage (Couverture), sélectionnez Per function (Par fonction) ou Per block (Par bloc) dans la liste déroulante.
Pour démarrer l'enregistrement, cliquez sur le bouton Reload (Recharger) au centre du panneau. Le panneau Coverage (Couverture) recharge la page, capture le code nécessaire au chargement de la page et poursuit l'enregistrement pendant que vous interagissez avec la page.
Pour arrêter l'enregistrement de la couverture de code, cliquez sur Stop instrumenting coverage and show results (Arrêter la couverture d'instrumentation et afficher les résultats) dans la barre d'action du panneau.
Analyser la couverture de code
Le tableau du panneau Coverage (Couverture) indique les ressources qui ont été analysées et la quantité de code utilisée dans chaque ressource.
Cliquez sur une ligne pour ouvrir cette ressource dans le panneau Sources et afficher une répartition ligne par ligne du code utilisé et du code inutilisé. Toutes les lignes de code inutilisées sont marquées par des lignes grises verticales à côté de la colonne contenant les numéros de ligne à gauche.
- La colonne URL correspond à l'URL de la ressource qui a été analysée.
- La colonne Type indique si la ressource contient du code CSS, JavaScript ou les deux.
- La colonne Total Bytes (Nombre total d'octets) correspond à la taille totale de la ressource en octets.
- La colonne Unused Bytes (Nombre d'octets inutilisés) correspond au nombre d'octets qui n'ont pas été utilisés.
- La colonne Usage Visualization (Visualisation de l'utilisation) est une visualisation des colonnes Total Bytes (Nombre total d'octets) et Unused Bytes (Nombre d'octets inutilisés). La section grise de la barre correspond aux octets inutilisés. La section verte correspond aux octets utilisés.
Pour filtrer le rapport par URL, spécifiez-la dans le filtre de la barre d'action.
La barre d'état en bas du panneau Coverage (Couverture) indique le pourcentage de code utilisé. La barre d'état tient compte du filtrage.
À côté de la barre de filtre, dans la liste déroulante, vous pouvez sélectionner All (Tout), ou uniquement CSS ou JavaScript à afficher dans votre rapport.
Pour inclure le code d'extension dans votre rapport, activez Content scripts (Scripts de contenu).
Pour exporter votre rapport, cliquez sur Export coverage (Exporter la couverture).