Chrome DevTools et la fonction « Inspecter l’élément » des autres na­vi­ga­teurs

La fonction « Inspecter l’élément » d’un na­vi­ga­teur est un des outils de base lorsqu’on travaille avec des sites et ap­pli­ca­tions Web. Cette fonction est également connue sous son nom anglais, « Inspect element », et fait partie des Chrome Developer Tools (rac­cour­cis en Chrome DevTools).

Que sont les outils de dé­ve­lop­pe­ment (de Google Chrome) ?

« Inspecter l’élément » est une des fonctions incluses dans les outils de dé­ve­lop­pe­ment Web d’un na­vi­ga­teur. Dans Chrome, ces outils sont également connus sous le nom de Chrome DevTools. Les Chrome Developer Tools sont le résultat d’une longue histoire de dé­ve­lop­pe­ment qui a commencé avec « Firebug » dans Firefox et « Web Inspector » dans Webkit (Safari) vers 2006.

« Inspecter l’élément » n’est donc pas une fonc­tion­na­lité à part entière, mais sert uni­que­ment à ouvrir les DevTools de Chrome. En effet, ils con­tien­nent une col­lec­tion d’outils es­sen­tiels pour tra­vail­ler avec des pages Web. Les DevTools de Chrome sont utilisés dans les domaines de la création, du dé­ve­lop­pe­ment, de l’analyse et de l’op­ti­mi­sa­tion. D’autres na­vi­ga­teurs proposent des fonc­tion­na­li­tés équi­va­lentes :

Close

Close

Close

La structure de base d’un site Web est un document HTML. Les contenus pro­pre­ment dits, prin­ci­pa­le­ment des textes et des images, y sont intégrés, ainsi que d’autres res­sources telles que des feuilles de style, des scripts et des polices. L’ensemble des in­for­ma­tions d’une page Web est rassemblé par le na­vi­ga­teur dans un bloc visuel.

Le suivi des relations entre les éléments d’une page Web né­ces­si­tait jusqu’à présent l’analyse du document HTML et des codes sources des autres res­sources. Aujourd’hui, le volume important de CSS et de Ja­vaS­cript des sites modernes rend cela pra­ti­que­ment im­pos­sible. C’est là qu’in­ter­vien­nent les DevTools de Chrome : si l’on souhaite inspecter un site Web, les outils de dé­ve­lop­pe­ment per­met­tent de voir ce qui se passe en coulisse, ainsi que tous les aspects d’un site Web :

« Inspecter l’élément » : la fonction DevTools (Chrome) expliquée dans le na­vi­ga­teur

Un na­vi­ga­teur récupère un document HTML sur un serveur et l’affiche. HTML définit la structure du document : quels sont les éléments et comment ces derniers sont imbriqués les uns dans les autres. Le document se trouve sur le serveur sous la forme d’un code source. Mais ce code source n’est que la base.

C’est sur cette base que le na­vi­ga­teur génère ce que l’on appelle le DOM (Document Object Model). En regardant uni­que­ment le code source, toutes les in­for­ma­tions ne sont pas dis­po­nibles ou ne sont pas fa­ci­le­ment visibles. Il est facile de com­prendre la structure HTML des dif­fé­rents éléments en utilisant des éditeurs Markdown.

Quelle est l’utilité des DevTools (Chrome) ?

Pour com­prendre l’utilité de la fonction « Inspecter l’élément », nous pouvons la comparer à l’ancienne fonction « Afficher le code source ». Cette fonction existe toujours et ouvre le code source d’un document HTML dans le na­vi­ga­teur. Son utilité reste cependant limitée, puisqu’elle ne montre qu’une petite partie des in­for­ma­tions présentes sur une page Web. Il manque par exemple tous les éléments dy­na­miques placés sur la page par Ja­vaS­cript.

Ce n’est qu’en utilisant « Inspecter l’élément » ou les DevTools de Chrome que l’on obtient une re­pré­sen­ta­tion de tous les éléments du DOM, qu’ils soient définis de manière statique en HTML ou générés de manière dynamique par Ja­vaS­cript. De plus, la structure réelle des éléments est re­pré­sen­tée avec les classes et les ID. Les outils de dé­ve­lop­pe­ment Chrome per­met­tent de manipuler les éléments et de vi­sua­li­ser im­mé­dia­te­ment les effets.

Les DevTools de Chrome englobent tous les éléments d’une page Web et pré­sen­tent le dé­rou­le­ment temporel de la con­sul­ta­tion des res­sources. Ils per­met­tent également d’évaluer le processus d’as­sem­blage et la per­for­mance de ce processus, ainsi que le stockage des données du site Web dans les cookies et le stockage Web local.

Comment accéder aux outils de dé­ve­lop­pe­ment de Google Chrome ?

La fonction « Inspecter l’élément » pro­pre­ment dite dépend du contexte : on effectue un clic droit sur un élément et on sé­lec­tionne l’entrée « Inspecter » dans le menu con­tex­tuel qui s’affiche. Il­lus­tra­tion ici pour les na­vi­ga­teurs Chrome et Firefox :

Close

Close

Dans Safari sous macOS Monterey, les outils de dé­ve­lop­pe­ment sont dé­sac­ti­vés par défaut. Pour pouvoir utiliser « Inspecter l’élément », il faut activer la fonction dans les réglages sous « Avancées ». Vous trouverez alors l’entrée « Inspecter l’élément » dans le menu con­tex­tuel :

Close

Close

Il existe également une série de rac­cour­cis clavier pour ouvrir les outils. Ils varient en fonction du na­vi­ga­teur et du système d’ex­ploi­ta­tion, mais certains standards se sont imposés. Dans chacun des trois na­vi­ga­teurs les plus répandus, Chrome, Firefox et Safari, le raccourci [Cmd] + [Opt.] + [i] (Mac) ou [Ctrl] + [Maj] + [i] (Windows et Linux) fonc­tionne.

F12 est également un raccourci al­ter­na­tif, sauf pour Safari. Les deux rac­cour­cis per­met­tent d’ouvrir et de fermer les outils de dé­ve­lop­pe­ment en cas d’uti­li­sa­tion répétée.

Lorsque vous ouvrez les outils de dé­ve­lop­pe­ment, ils ap­pa­rais­sent d’abord sur la page affichée par votre na­vi­ga­teur. Vous pouvez choisir entre une pré­sen­ta­tion à droite, à gauche ou en dessous du contenu Web. Mais les DevTools de Chrome peuvent aussi être affichés dans une fenêtre séparée. Cela est pratique dans le cadre d’un travail intensif : vous po­si­tion­nez la page Web et les outils de dé­ve­lop­pe­ment l’un à côté de l’autre, ou ré­par­tis­sez les fenêtres sur plusieurs écrans.

Close

Close

Comment inspecter une page sur un smart­phone à l’aide des DevTools de Chrome ?

Alors que la fonction « Inspecter l’élément » est standard sur chaque na­vi­ga­teur de bureau, elle n’est mal­heu­reu­se­ment pas dis­po­nible sur smart­phone. La raison est tout d’abord qu’il n’y a pas assez de place pour afficher les DevTools sur la taille réduite de l’écran. De plus, l’absence de la souris comme pé­ri­phé­rique de saisie précis est pro­blé­ma­tique. Sur iOS, la situation est encore plus difficile, car tous les na­vi­ga­teurs sont limités au moteur de rendu de na­vi­ga­teur WebKit d’Apple.

Au lieu d’utiliser les DevTools de Chrome sur smart­phone, les dé­ve­lop­peurs ont recours à des ému­la­teurs, qui simulent un appareil mobile dans le na­vi­ga­teur de bureau. La vue adap­ta­tive des outils de dé­ve­lop­pe­ment de Chrome est par­ti­cu­liè­re­ment pratique. Il est également possible de connecter un smart­phone physique à l’or­di­na­teur de bureau pour iOS et Android. Là encore, le site Web chargé est inspecté dans le na­vi­ga­teur de bureau. Pour iOS, cette opération nécessite un Mac et le même compte iCloud sur les deux appareils.

Close

Comment utiliser les outils de dé­ve­lop­pe­ment (Chrome) ?

Les DevTools de Chrome fonc­tion­nent pour tous les contenus affichés dans le na­vi­ga­teur et trouvent de nom­breuses ap­pli­ca­tions dans les domaines du dé­ve­lop­pe­ment, du design et du ré­fé­ren­ce­ment. Grâce à la forte diffusion de la tech­no­lo­gie Web, d’autres pos­si­bi­li­tés d’uti­li­sa­tion ont vu le jour. Voici un aperçu des fonctions et des ap­pli­ca­tions.

Dé­ve­lop­pe­ment Web

Les DevTools de Chrome sont utilisés dans le dé­ve­lop­pe­ment Web pour le pro­to­ty­page et les tests, ainsi que pour la recherche d’erreurs. Une des uti­li­sa­tions les plus fré­quentes consiste à définir une nouvelle règle de style CSS et à l’appliquer à des éléments. Nous il­lus­trons cela par l’exemple d’une classe Debug. Si nous at­tri­buons la classe à un élément, tous les éléments enfants sont re­pré­sen­tés en rouge. De plus, les éléments sont dotés d’une bordure dorée. Cela permet de diag­nos­ti­quer les erreurs de mise en page. Voici le code CSS utilisé :

.debug * {
    color: red !important;
    outline: 1px solid gold;
}

Close

Close

Close

Close

Pour utiliser les DevTools de Google Chrome à des fins de dépannage et d’analyse, il est essentiel de dé­sac­ti­ver le cache du na­vi­ga­teur. En effet, il se peut que des res­sources soient chargées à partir du cache local, de sorte que les éléments affichés ne reflètent pas la situation réelle. Le paramètre per­met­tant de dé­sac­ti­ver le cache se trouve dans l’onglet « Réseau », qui convient également pour analyser les erreurs de type ERR_SSL_PROTOCOL_ERROR.

Close

Il est souvent utile d’accéder à l’élément examiné dans la console Ja­vaS­cript des DevTools de Chrome. En pratique, le na­vi­ga­teur met à dis­po­si­tion la variable $0 qui référence l’élément examiné. Il s’agit d’un DOM tout à fait normal, dont nous pouvons accéder aux pro­prié­tés et aux méthodes. Voici quelques exemples d’in­te­rac­tions utiles avec l’élément examiné :

# currently inspected element
$0
# get classes of inspected element
$0.classList
# get ID of inspected element
$0.getAttribute('id')

Close

Con­cep­tion de sites Web

Les Chrome Developer Tools sont très utilisés dans la con­cep­tion de sites Web. Ils sont même in­dis­pen­sables pour la création de Res­pon­sive Web design avec des fra­me­works uti­li­taires comme Tailwind CSS. Ils per­met­tent d’activer et de dé­sac­ti­ver ra­pi­de­ment les classes d’un élément et d’en vi­sua­li­ser im­mé­dia­te­ment les effets. De plus, il est possible de lire les valeurs calculées des pro­prié­tés CSS pour l’élément examiné.

Close

Close

Close

Op­ti­mi­sa­tion des moteurs de recherche (SEO)

Les DevTools de Chrome sont également utiles pour l’op­ti­mi­sa­tion des moteurs de recherche. Une ca­rac­té­ris­tique im­por­tante du SEO on-page est le balisage correct des titres. Nous utilisons la fonction « Inspecter l’élément » pour analyser la structure des titres :

Close

Les per­for­mances de char­ge­ment d’une page sont un facteur dé­ter­mi­nant pour le clas­se­ment des moteurs de recherche et l’ex­pé­rience uti­li­sa­teur. Nous utilisons l’onglet « Réseau » des outils de dé­ve­lop­pe­ment de Chrome pour analyser les res­sources chargées, ainsi que leur taille et leur temps de char­ge­ment :

Close

L’outil Google Ligh­thouse, qui soumet une page à plusieurs analyses per­ti­nentes pour le ré­fé­ren­ce­ment, est également intégré dans Chrome DevTools. La version desktop et la version mobile de la page peuvent être analysées sé­pa­ré­ment :

Close

Close

Close

Adapter la page

En plus des ap­pli­ca­tions pro­fes­sion­nelles déjà pré­sen­tées des DevTools de Chrome, ceux-ci con­vien­nent également pour adapter une page Web dans un na­vi­ga­teur. Cela est par­ti­cu­liè­re­ment pratique pour préparer des pages à l’im­pres­sion ou pour faire des captures d’écran. L’une des astuces les plus courantes consiste à utiliser « Inspecter l’élément » pour détecter certains éléments et les masquer. Il est ainsi possible de cacher les bannières pu­bli­ci­taires ou les cookies agaçants.

L’approche la plus simple consiste à attribuer la propriété CSS suivante à l’élément à masquer :

display: none;

Close

Close

Une autre solution consiste à sé­lec­tion­ner l’élément à masquer avec « Inspecter l’élément » et à utiliser Ja­vaS­cript pour lui attribuer la propriété CSS. Nous utilisons ici la variante in­te­rac­tive de « Inspecter l’élément » :

Close

# hide inspected element
$0.style.display = 'none'
# undo changes to inspected element
$0.style.display = 'revert'

Le Design Mode peut également être activé via Ja­vaS­cript. Celui-ci permet d’éditer le texte de la page comme on le fait ha­bi­tuel­le­ment dans Word :

document.designMode = "on"

Close

Close

Extraire des contenus

Les pages Web con­tien­nent de nombreux contenus utiles auxquels l’uti­li­sa­teur peut en principe accéder. Les textes peuvent être copiés et les images té­lé­char­gées. Parfois, cela ne suffit pas, surtout si l’on souhaite récupérer une liste ou un tableau d’in­for­ma­tions vo­lu­mi­neux. La fonction « Copier l’élément » permet d’exporter le contenu et la structure d’un élément, y compris les sous-éléments, pour les traiter dans des éditeurs de code. Les Chrome DevTools sont également utilisés pour remplir le tableur Google Sheets avec la fonction ImportXML.

Close

Les DevTools de Chrome per­met­tent également de réaliser des captures d’écran. Il est ainsi possible d’exporter la partie visible de l’écran, la page entière ou un élément in­di­vi­duel sous forme de graphique. Cela permet de re­pro­duire l’affichage sur dif­fé­rents terminaux, en par­ti­cu­lier en com­bi­nai­son avec la vue adap­ta­tive.

Close

Close