Le panneau Couverture des outils pour les développeurs Chrome peut vous aider à trouver du code JavaScript et CSS inutilisé. En supprimant le code inutilisé, vous pouvez accélérer le chargement des pages et économiser les données mobiles de vos utilisateurs.
Présentation
L'envoi de codes JavaScript ou CSS inutilisés est un problème courant dans le développement Web. Par exemple, supposons que vous souhaitiez utiliser le composant Bouton d'amorçage sur votre page. Pour utiliser le composant Button, vous devez ajouter un lien vers la feuille de style d'Bootstrap dans votre code HTML, comme ceci:
...
<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 Button. Il contient le code CSS de tous les composants de Bootstrap. Mais vous n'utilisez aucun des autres composants d'amorçage. Votre page télécharge donc beaucoup de CSS dont elle n'a pas besoin. Ce code CSS supplémentaire pose problème pour les raisons suivantes:
- Ce 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 consomme ses données mobiles.
Ouvrir le panneau Couverture
- Ouvrez le menu de commandes.
Commencez à saisir
coverage, sélectionnez la commande Show Coverage (Afficher la couverture), puis appuyez sur Entrée pour exécuter la commande. Le panneau Couverture s'ouvre dans le panneau.
Enregistrer une couverture de code
Pour capturer une couverture de code:
Pour définir la portée de la couverture, sélectionnez Par fonction ou Par bloc dans la liste déroulante dans la barre d'action en haut du panneau Couverture.
Pour démarrer l'enregistrement, cliquez sur refresh. Commencer la couverture d'instrumentation et actualiser la page. Le panneau Coverage (Couverture) actualise la page, capture le code nécessaire pour charger la page, puis poursuit l'enregistrement pendant que vous interagissez avec la page.
Pour arrêter d'enregistrer la couverture de code, cliquez sur stop_circle Arrêter l'instrumentation de la couverture 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 cette ressource dans le panneau Sources et afficher une répartition ligne par ligne du code utilisé et du code inutilisé. Les lignes de code inutilisées sont indiquées par des lignes rouges à côté de la colonne, avec des numéros de ligne à gauche.
- La colonne URL contient l'URL de la ressource analysée.
- La colonne Type indique si la ressource contient du code CSS, JavaScript ou les deux.
- La colonne Nombre total d'octets indique la taille totale de la ressource en octets.
- La colonne Unused Bytes 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 correspond aux octets inutilisés. La section grise est composée d'octets.
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 Couverture indique le pourcentage de code utilisé. La barre d'état prend en compte le filtrage.
À côté de la barre de filtre, dans la liste déroulante, vous pouvez sélectionner Tous, ou seulement CSS ou JavaScript à afficher dans votre rapport.
Pour inclure le code d'extension dans votre rapport, activez check_box Scripts de contenu.
Pour exporter votre rapport, cliquez sur Télécharger Exporter la couverture.