Viewing Unused JS & CSS Codes on Google Devtools

Vous pouvez afficher les codes Javascript et CSS inutilisés sur la page relative à la coverage de Chrome Devtools (Inspect).

Lors de la création de pages Web, les fragments de code qui ne sont pas utilisés lors du rendu et chargés sur la page inutile augmentent inutilement le chargement de la page, affectant ainsi négativement les performances d’ouverture de la page.

Chrome Devtools Coverage

Pour ouvrir DevTools (Inspect) sur le navigateur Web Chrome, cliquez avec le bouton droit de la souris et cliquez sur inspecter. Vous pouvez également l’ouvrir avec le raccourci clavier, Option + Command + I pour Mac OS, Ctrl + Shift + J ou F12 pour Windows et Linux.

Pour afficher les ressources CSS et JS inutilisées dans l’écran de révision, il est nécessaire d’ouvrir la section Coverage. Cliquez sur les trois points en haut à droite de l’écran puis allez dans > More Tools > Coverage.

Après avoir cliqué sur le bouton Coverage, le “Click the record button to start capturing coverage.” Cliquez sur le champ.

Après avoir cliqué sur le bouton, des informations sur la quantité de ressources téléchargées sur la page qui n’est pas utilisée s’affichent.

Lorsque vous cliquez sur l’une des URL répertoriées dans l’onglet Coverage, les parties utilisées et inutilisées des codes de l’URL source sélectionnée dans l’onglet Sources ci-dessus s’affichent.

Dans les fragments de code qui apparaissent dans le champ Sources, ceux avec une bande rouge à gauche indiquent ceux qui ne sont pas utilisés, et ceux avec une bande bleue indiquent les codes utilisés.