Utilisation de l'outil "Inspecter" de Google Chrome pour le diagnostic des sites Web
Google Chrome n’est pas seulement un navigateur rapide pour les consommateurs - il cache également une multitude de fonctionnalités pour les développeurs. Vous pouvez révéler une partie de cette puissance avec l’outil “Inspecter”. Bien qu’il puisse sembler écrasant au début, cet outil vous donne un aperçu de la façon dont les sites Web sont construits, et il peut vous aider à déboguer vos propres sites.
Accéder à l’outil Inspecter
L’outil Inspecter se trouve dans le menu contextuel de Chrome.
Cliquez avec le bouton droit sur n’importe quel élément de votre navigateur et cliquez sur “Inspecter” dans le menu contextuel.
Une fenêtre apparaîtra sur le côté du navigateur Chrome comme indiqué ci-dessous. Cela s’appelle le panneau DevTools. Si vous avez déjà utilisé Firebug sur Firefox, vous reconnaîtrez peut-être certaines parties.
Il y a beaucoup de choses ici, alors examinons les différentes parties.
Inspecter l’inspecteur
Le panneau d’inspection est divisé en plusieurs onglets différents qui sont visibles en haut de la fenêtre. Nous allons nous concentrer sur l’onglet par défaut Éléments.
Il y a deux boutons utiles à côté de ces onglets. Le premier est l’outil Inspecter l’élément.
Cet outil vous permet de survoler et de sélectionner différents éléments DOM à inspecter.
Le deuxième bouton active le mode d’aperçu des appareils. Dans ce mode, vous pouvez voir à quoi ressemble votre page Web à différentes résolutions et tailles d’écran.
Si vous cliquez sur ce bouton, vous verrez votre page Web passer à une nouvelle vue.
Vous pouvez ensuite utiliser le menu déroulant au-dessus de l’aperçu de la page ou les poignées sur les côtés de l’aperçu de la page pour redimensionner la fenêtre d’aperçu de l’appareil.
Vue HTML
La plupart de l’onglet DevTools est occupée par le panneau HTML.
Ce panneau est comme une “Vue Source” surpuissante. Il est structuré selon le DOM, avec des éléments imbriqués à l’intérieur de leurs éléments parents.
Vous verrez que l’élément que vous avez “inspecté” au début est automatiquement mis en surbrillance avec un fond gris ou bleu. Ici, j’ai inspecté une image qui est contenue dans un lien. Comme prévu, je vois une balise d’ancre mise en surbrillance.
Mais où est mon image ? Je peux révéler n’importe quel élément DOM imbriqué dans la balise d’ancre en cliquant sur le triangle de divulgation à côté de celle-ci. Dans ce cas, la flèche révèle la balise que je m’attendais à trouver.
Vous remarquerez également une petite barre de menu en bas du panneau HTML.
Ceci s’appelle le fil d’Ariane, et il vous montre tous les éléments parents de l’élément sélectionné. Pour naviguer vers l’un de ces éléments, il suffit de cliquer dessus.
Styles
Sous la vue HTML, nous voyons également un panneau qui montre toutes les règles CSS qui s’appliquent à notre élément. Ceci s’appelle le panneau Styles, et dans ce cas, nous voyons toutes les règles qui s’appliquent à la balise d’ancre que j’ai inspectée plus tôt.
Vous pouvez activer ou désactiver une règle en survolant celle-ci et en cliquant sur la case à cocher à côté.
Vous verrez ce changement reflété dans l’aperçu de la page immédiatement. Et si vous cliquez directement sur une règle, vous pouvez changer son nom et sa valeur.
Vous pouvez également rechercher des règles particulières en utilisant la zone de recherche Filtre.
Cependant, le panneau Styles est capable de bien plus que cela. Consultez la documentation de Google pour une explication complète des nombreuses fonctions du panneau Styles.
Modèle de boîte et style calculé
À côté de la vue des styles se trouve le modèle de boîte pour mon élément sélectionné. Si vous n’êtes pas familier, le modèle de boîte est une représentation abstraite de la marge, de la bordure, du rembourrage et de la taille du contenu appliqués à un élément particulier.
Dans ce cas, je peux voir que mon élément a une taille principale de 461 x 209 pixels. Il ne contient aucune règle de marge, de bordure ou de rembourrage, donc ces cases sont vides.
Si vous choisissez un élément avec des règles de position, de marge, de bordure ou de rembourrage, votre modèle de boîte pourrait ressembler davantage à ceci.
Vous pouvez également voir un modèle de boîte in situ si vous survolez des éléments DOM avec l’outil Inspecter l’élément activé.
Sous le modèle de boîte se trouve une liste de toutes les règles de style qui s’appliquent à cet élément particulier. Ceci est légèrement différent du panneau Styles. Il n’affiche pas les lignes réelles de CSS - seulement les effets de ces règles. Ceci s’appelle le “style calculé” de l’objet, et c’est le résultat combiné de votre CSS.
Enfin, vous pouvez rechercher des règles particulières en tapant dans la zone de filtre.
Conclusion
Si vous travaillez fréquemment avec des pages Web, l’outil Inspecter de Chrome vaut vraiment la peine d’être exploré. Et les autres onglets de DevTools, comme Console et Réseau, peuvent être inestimables pour les développeurs. Il y a plus que nous ne pouvons couvrir en ce moment, mais la documentation de Google est complète et utile.
