Le panneau Couverture des outils pour les développeurs Chrome vous permet d'identifier les ressources JavaScript et Code CSS. La suppression du code inutilisé peut accélérer le chargement de votre page et économiser les données mobiles des utilisateurs.
Présentation
L'envoi de codes JavaScript ou CSS inutilisés est un problème courant en développement Web. Par exemple, supposons que vous souhaitiez utiliser le composant bouton de Bootstrap. sur votre page. Pour utiliser le composant Bouton, vous devez ajouter un lien vers Feuille de style d'amorçage 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 du bouton. Il contient le CSS pour tous les composants de Bootstrap. Mais vous n'utilisez pas l'un des autres composants d'amorçage. Votre page télécharge un ensemble dont il n'a pas besoin. Ce CSS supplémentaire pose problème pour les éléments suivants : raisons:
- Ce code supplémentaire ralentit le chargement de la page. Consultez la page CSS bloquant l'affichage.
- Si un utilisateur accède à la page sur un appareil mobile, le code supplémentaire utilise leurs 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 la couverture de code
Pour capturer la 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 (Actualiser) Start in instrumenting delivery and refresh page (Démarrer la couverture d'instrumentation et actualiser la page). Le panneau Couverture actualise la page, capture le code nécessaire à son chargement et poursuit l'enregistrement pendant que vous interagissez avec la page.
Pour arrêter l'enregistrement de la couverture du code, cliquez sur stop_circle 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 d'une ligne rouge à côté d'une colonne avec les numéros de ligne sur la gauche.
- La colonne URL correspond à l'URL de la ressource analysée.
- La colonne Type indique si la ressource contient des éléments CSS, JavaScript, ou les deux.
- La colonne Total Bytes indique la taille totale de la ressource en octets.
- La colonne Unused Bytes (Octets inutilisés) indique le nombre d'octets non utilisés.
- La dernière colonne sans nom est une visualisation du total Bytes (Nombre total d'octets) et Unused Bytes (Octets inutilisés). La partie rouge de la barre contient des octets inutilisés. La la section grise est utilisée en octets.
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 Tous, ou uniquement CSS ou JavaScript à afficher dans votre rapport.
Pour inclure un code d'extension dans votre rapport, cochez check_box Scripts de contenu.
Pour exporter votre rapport, cliquez sur Télécharger Exporter la couverture.