Le panneau Couverture vous aide à trouver le code JavaScript et CSS inutilisé. Supprimer le code inutilisé peut accélérer le chargement de vos pages et économiser les données mobiles de vos utilisateurs.
Présentation
L'envoi de code JavaScript ou CSS inutilisé est un problème courant dans le développement Web. Par exemple, supposons que vous souhaitiez utiliser le composant de bouton de Bootstrap sur votre page. Pour utiliser le composant "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 seulement le code du composant bouton. Il contient le CSS de tous les composants de Bootstrap. Cependant, vous n'utilisez aucun des autres composants Bootstrap. Votre page télécharge donc un tas de fichiers CSS dont elle n'a pas besoin. Ce CSS supplémentaire pose problème pour les raisons suivantes:
- Le code supplémentaire ralentit le chargement de votre page. Consultez la page CSS bloquant l'affichage.
- Si un utilisateur accède à la page sur un appareil mobile, le code supplémentaire utilise ses données mobiles.
Le panneau 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 "Couverture"
- Ouvrez les outils pour les développeurs.
- Ouvrez le menu Command (Commande).
Commencez à saisir
coverage, sélectionnez la commande Afficher la couverture, puis appuyez sur Entrée pour l'exécuter. Le panneau Couverture s'ouvre dans le volet.
Vous pouvez également sélectionner more_vert Autres options > Plus d'outils > Couverture en haut à droite.
Enregistrer la couverture de code
Pour capturer la couverture de code:
Pour définir la portée de la couverture, dans la barre d'action en haut du panneau Couverture, sélectionnez Par fonction ou Par bloc dans la liste déroulante.
Pour démarrer l'enregistrement, cliquez sur Commencer à instrumenter la couverture et actualiser la page. Le panneau Couverture actualise la page, capture le code nécessaire pour la charger et poursuit l'enregistrement pendant que vous interagissez avec la page.
Pour arrêter l'enregistrement de la couverture du code, cliquez sur Arrêter la couverture d'instrumentation et afficher les résultats.
Analyser la couverture de code
Le tableau du panneau Couverture indique les ressources analysées et la quantité de code utilisée dans chacune d'elles.
Cliquez sur une ligne pour ouvrir la ressource concernée dans le panneau Sources et voir la répartition ligne par ligne du code utilisé et du code inutilisé. Les lignes de code inutilisées sont marquées par des lignes rouges à côté de la colonne avec les numéros de ligne à gauche.
- La colonne URL indique l'URL de la ressource analysée.
- La colonne Type indique si la ressource contient du CSS, du JavaScript ou les deux.
- La colonne Octets totaux indique la taille totale de la ressource en octets.
- La colonne Octets inutilisés indique le nombre d'octets non utilisés.
- La dernière colonne sans nom est une visualisation des colonnes Total Bytes (Nombre total d'octets) et Unused Bytes (Octets inutilisés). La partie rouge de la barre contient des octets inutilisés. La section grise correspond aux octets utilisés.
Pour filtrer le rapport par URL, indiquez-la dans le filtre de la barre d'action.
La barre d'état en bas du panneau 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 Tout, ou uniquement CSS ou JavaScript à afficher dans votre rapport.
Pour inclure le code d'extension dans votre rapport, activez la Scripts de contenu.
Pour exporter votre rapport, cliquez sur Exporter la couverture.