Rechercher du code JavaScript et CSS inutilisé à l’aide de l’outil Couverture
L’outil Couverture vous aide à trouver du code JavaScript et CSS inutilisé. La suppression du code inutilisé peut accélérer le chargement de votre page et enregistrer les données cellulaires de vos utilisateurs mobiles.
Ce guide explique comment rechercher du code inutilisé à l’aide de l’outil Couverture . Ce guide n’explique pas comment refactoriser un code base pour éviter le code inutilisé, car la refactorisation du code dépend de votre pile technologique.
Vue d'ensemble
L’expédition de JavaScript ou CSS inutilisé est un problème courant dans le développement web. Par exemple, supposons que vous souhaitiez utiliser le composant bouton Bootstrap sur votre page. Pour utiliser le composant bouton, vous devez ajouter un lien à la feuille de style Bootstrap dans votre code HTML, comme suit :
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Button</button>
</body>
</html>
Cette feuille de style n’inclut pas seulement le code du composant de bouton Bootstrap ; il contient le CSS pour tous les composants Bootstrap. Étant donné que votre page utilise uniquement le composant bouton, vous faites en sorte que les utilisateurs téléchargent du code supplémentaire dont ils n’ont pas besoin. L’outil Couverture vous aide à trouver du code inutilisé comme celui-ci.
Ouvrir l’outil Couverture
Pour rechercher du code inutilisé dans votre page, utilisez l’outil Couverture :
Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
Dans DevTools, ouvrez le menu Commandes. Pour ouvrir le menu Commande, appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS).
Commencez à taper couverture, appuyez sur la touche Flèche bas pour mettre en surbrillance la commande Afficher la couverture , puis appuyez sur Entrée :
L’outil Couverture s’ouvre dans le panneau Affichage rapide en bas de DevTools :
Couverture du code d’enregistrement
Cliquez sur l’un des boutons suivants dans l’outil Couverture :
Pour voir le code nécessaire au chargement de la page, cliquez sur la couverture Démarrer l’instrumentation et actualisez la page (
).Pour voir quel code est utilisé après avoir interagi avec la page, cliquez sur le bouton Couverture de
).
Pour arrêter l’enregistrement de la couverture du code, cliquez sur le bouton Arrêter la couverture de l’instrumentation et afficher les résultats (
).
Analyser la couverture du code
Le tableau de l’outil Couverture affiche 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 l’outil Sources et afficher un rapport de couverture du code qui fournit une répartition ligne par ligne du code utilisé et du code inutilisé :
Colonnes dans le rapport de couverture du code :
| Colonne | Description |
|---|---|
| URL | URL de la ressource analysée. |
| Type | Indique si la ressource contient CSS, JavaScript ou les deux. |
| Nombre total d’octets | Taille totale de la ressource en octets. |
| Octets inutilisés | Nombre d’octets qui n’ont pas été utilisés. |
| Visualisation de l’utilisation | Visualisation des colonnes Nombre total d’octets et Octets inutilisés . La section verte de la barre est des octets utilisés. La section rouge de la barre est des octets inutilisés. |
Remarque
Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).
Cette œuvre est concédée sous licence creative commons attribution 4.0 international.