Les DevTools Chrome : le guide

Les DevTools Chrome, c’est un des éléments essentiels pour les développeurs freelance utilisant des technos web.

C’est cet ensemble d’outils, que nous allons détailler par la suite, qui fait qu’une grande partie des développeurs JavaScript restent sous Chrome. En effet, bien que d’autres navigateurs (comme Firefox) aient le même genre de fonctionnalités, celles de Chrome sont très complètes.

Modification en live du HTML, accès aux appels réseaux, audit SEO, etc. Ne sont qu’une petite partie des fonctionnalités que propose DevTools.

De plus, cette boite à outils s’enrichit régulièrement de nouvelles fonctionnalités, la rendant de plus en plus indispensable pour les développeurs.

Alors, comment fonctionnent les DevTools Chrome dont les développeurs ne peuvent plus se passer ? Réponse dans cet article !

Présentation des DevTools

Les DevTools Chrome se présente sous la forme d’un bloc qui s’ajoute sur l’interface du navigateur Chrome.

Pour l’ouvrir, il y a plusieurs méthodes :

1. En utilisant des raccourcis clavier :
   • Command + Option + i sur macOs
   • Ctrl + Maj + i sous Windows et Linux
2. En cliquant avec le bouton droit de la souris n’importe où dans le navigateur, puis en cliquant sur Inspecter
3. En utilisant le menu principal de Chrome:
   1. Cliquez sur le bouton de menu Chrome
   2. Sélectionnez Plus d'outils
   3. Sélectionnez Outils de développement

Une fois ouverte, cette console se trouve par défaut en bas de l’écran, mais on peut facilement la déplacer (à gauche ou à droite de l’écran), ou l’afficher dans une nouvelle fenêtre, en cliquant ici :

Comme vous pouvez le voir, dans cette console, on retrouve différents onglets (Elements, Console, Sources, etc.) représentant chacun une fonctionnalité. Ce sont de ces fonctionnalités dont nous allons parler dans la suite de l’article.

Les principales fonctionnalités de DevTools

De base, on peut dire que les outils de développement Chrome comptent environ dix fonctionnalités. Mais comme nous allons le voir, derrière chacune de ces features se cachent beaucoup d’autres sous-features. Il est de plus possible d’ajouter de nouveaux onglets à ce dock, de quoi le rendre encore plus puissant.

Faisons le tour des fonctionnalités les plus utilisées des DevTools Chrome.

Elements

Commençons par le premier onglet, et un des plus utilisés : Elements.

Fausse modification du DOM

Elements nous permet d’accéder à l’ensemble de l’arborescence HTML de la page sur laquelle on se trouve, ainsi qu’aux styles CSS appliqués à ces éléments.

Mieux encore, on peut, via cet onglet, faire ce qu’on pourrait appeler une fausse modification instantanée. C’est à dire, modifier le code HTML et CSS à la volée, et voir le résultat sur la page web en temps réel.

Évidemment, ces changements ne perdurent pas, et si vous rafraichissez la page ils vont disparaitre. Mais c’est très utile lorsqu’on veut tester très rapidement la modification d’un élément HTML, et encore plus d’une propriété CSS.

Test du responsive

L’autre fonctionnalité principale de cet onglet Elements, c’est la possibilité de tester le site web sous différentes tailles d’écrans. Pour ce faire, il suffit de cliquer ici :

Pour voir apparaître le site dans une taille d’écran différente. On peut changer nous-mêmes le device sous lequel on veut voir la page s’afficher, ajouter, retirer des devices, changer l’affichage portrait/paysages, tester le mode offline, etc.

Cette fonctionnalité est très souvent utilisée par les développeurs web, lorsqu’il s’agit de tester le responsive d’une page web sous différentes tailles, des grands écrans aux petits smartphones.

Quelques astuces

• En faisant un clic droit sur un élément HTML, un menu avec différentes actions s’affiche, notamment la possibilité de copier ce contenu de différentes manières (element, outerHTML, selector, etc.) ;
• Vous pouvez simuler un état d’une classe CSS (hover, active, focus, etc.) pour voir ce que votre code fait comme rendu, sans avoir à faire d’action sur la page. Pour cela, il faut cliquer sur le « :hov » au-dessus du panneau affichant les propriétés CSS ;
• Dans ces mêmes propriétés, si vous voulez modifier une couleur, cliquez sur le petit carré coloré à gauche du code hexadécimal. Cela ouvrira une petite fenêtre vous permettant de trouver l’exacte couleur qu’il vous faut, mais également une pipette que vous pourrez utiliser pour trouver la bonne couleur déjà présente sur la page !

Console

Une autre fonctionnalité très utilisée dans les DevTools Chrome, c’est évidemment la console, essentielle aux développeurs JavaScript.

Elle permet d’afficher tout un tas de messages, par exemple :

• Les erreurs de syntaxe de votre code ;
• Les erreurs lors des appels serveur (retours 500, etc.) ;
• Les différentes console.(log|error|warning|…) que vous avez placé dans votre code.

Mais la console permet également de taper du code JavaScript en direct et de l’exécuter. Si ça peut ne pas paraitre très pratique au premier abord, cela a tout de même plusieurs utilités. Pour accéder à des variables globales que vous avez déclarées, déjà. Mais également pour tester des petits morceaux de code manipulant le DOM (getElementById, etc.) et ainsi éviter d’avoir à faire plusieurs essais dans votre éditeur.

En cliquant sur la roue crantée de cet onglet, vous verrez les options qu’offre cette fonctionnalité : garder les logs de la console (qui s’effacent normalement à chaque rafraichissement), utiliser de l’autocomplétion en fonction de votre historique, etc.

Bref, la console est extrêmement utile pour le déboggage JavaScript, essentiel au développement web.

Network

L’onglet Network est lui aussi très utilisé. Et pour cause, il regroupe tous les appels réseaux qui passent par le navigateur. On y retrouve par exemple :

• Le chargement de tous les scripts (CSS, JavaScript, etc.) ;
• Le chargement de toutes les images ;
• Les échanges de flux (requêtes aux actions de l’utilisateur : connexion, soumission de formulaire, etc.).

Dans chacun de ces appels, on peut avoir accès à différentes informations : les headers de la requête, le contenu de la requête, le contenu de la réponse, ou encore le temps qu’a pris la requête pour aboutir.

Très utile notamment pour du développement back ou fullstack, la fonctionnalité Network renferme également une sous-fonctionnalité un peu cachée mais qui peut se révéler importante : la possibilité de tester le site avec de mauvaises connexions.

Typiquement, en cliquant sur la selectbox où il est inscrit « No throttling« , il est possible de simuler une mauvaise connexion 3G, et de voir comment le site réagit. Cela permet notamment de mesurer le temps de réponse, à la fois du site dans sa globalité, mais aussi individuellement, sur chaque appel réseau.

Application

La prochaine fonctionnalité dont nous allons parler se trouve dans l’onglet « Application« . Via cette interface, on peut avoir accès à tout un tas de données qui seront moins utiles au quotidien, mais dont il est bon de connaître l’existence.

Par exemple, si vous devez manipuler des bases de données et du stockage côté navigateur, ou accéder aux différents cookies qui sont stockés, c’est ici qu’il faut aller.

C’est le cas si, notamment, vous devez gérer le localStorage ou sessionStorage. Ces données seront accessibles et modifiables depuis cet onglet des DevTools.

C’est également ici que seront consultables les éventuels manifests et service workers, éléments essentiels au bon fonctionnement des Progressive Web Apps (PWA).

Lighthouse

La dernière fonctionnalité importante que nous allons aborder ici, c’est Lighthouse.

C’est une des dernières features introduites par Chrome dans ses DevTools. Si elle peut paraitre complètement inutile pour certains, c’est pourtant une fonctionnalité qui devrait être utilisée lorsqu’on fait du développement web.

Lighthouse fait, pour rester simple, un audit de votre site. Se concentrant notamment sur le SEO, l’accessibilité et les performances, Lighthouse analyse votre page web et vous donne des scores sur 100 dans ces différentes catégories.

Mieux encore, Lightouse vous explique comment booster ces différents éléments en fonction des bonnes pratiques déjà définies.

Ce qui permet non seulement d’avoir une idée précise de ce qui ne va pas dans votre site, et notamment ce qui nuit à son référencement, mais cela vous donne aussi des pistes d’améliorations pour rapidement corriger ces failles.

Utilisation d’autres extensions DevTools

Il est aussi possible d’utiliser des extensions DevTools externes en plus de celles déjà fournies par Chrome.

Si vous êtes développeur front-end, il est par exemple possible d’installer des extensions pour faciliter le développement (et surtout le déboggage) quand on utilise certaines librairies ou frameworks. C’est par exemple le cas avec le framework Angular, qui a récemment mis à disposition une extension pour DevTools.

Ainsi, les outils de développement Chrome sont enrichis d’encore plus de nouvelles fonctionnalités, permettant un développement plus fiable et un déboggage plus facile.

Et si vous voulez vous essayer au développement de DevTools, Google a créé une documentation juste ici.

Conclusion

J’espère que cet article vous aura aidé à y voir plus clair sur ce que sont les DevTools, lesquels sont les plus importants et comment les utiliser !

Gardez en tête qu’on a vu ici qu’une introduction aux DevTools Chrome, il existe bien plus de fonctionnalités et sous-fonctionnalités que celles listées ici. Si vous voulez en savoir plus ou avez des besoins plus spécifiques, quelques recherches sur le net vous aideront facilement.

Si vous avez tout de même des questions sur les DevTools et leur utilisation, l’espace commentaire est là pour vous.