Chrome DevTools est souvent cité comme la raison principale pour laquelle les développeurs restent fidèles à ce navigateur, évitant ainsi d’autres options.
Cependant, la plupart d’entre nous n’exploitent qu’une fraction des possibilités offertes, ignorant une multitude de fonctions exceptionnelles régulièrement ajoutées.
Partons à la découverte de quelques-unes de ces perles cachées !
Chacun a ses préférences en matière de système d’exploitation, de matériel, d’appareil et de format. Mais un point commun nous unit : l’utilisation du navigateur Chrome, et uniquement Chrome ! Il semble juste d’affirmer que la guerre des navigateurs est bel et bien terminée, et Chrome en est sorti vainqueur de manière incontestable.
Les utilisateurs de Windows se servent du navigateur par défaut, principalement pour télécharger Chrome, puis l’adoptent, ignorant les « suggestions » de Windows. Le même schéma se répète pour les appareils Apple (notamment les MacBook et les écrans plus grands), où les utilisateurs, et surtout les développeurs, délaissent Safari, malgré les nombreuses tentatives et arguments d’Apple pour les convaincre.
Et si un appareil n’est pas compatible avec Chrome, il est fort probable qu’il utilise une version dérivée compatible, comme Brave ou Vivaldi. Oui, techniquement, ces navigateurs ne sont pas construits sur la base de Chrome, mais c’est un débat à part. L’utilisateur moyen peut préférer ces alternatives pour des raisons idéologiques ou spécifiques, mais pour les développeurs, il n’y a qu’un seul choix envisageable : Chrome.
Même son appétit vorace en mémoire vive est négligé. La raison en est simple : les Outils de développement Chrome.
Source de l’image : documentation officielle de Chrome DevTools
Si vous lisez cet article, il est raisonnable de penser que vous êtes un utilisateur avancé, un bidouilleur, un développeur web, ou une figure similaire. De ce fait, nous n’avons pas besoin d’introduction aux DevTools, à leur ouverture, ni à leurs diverses fonctionnalités.
Plutôt que de tergiverser, plongeons directement dans certaines des fonctionnalités méconnues, mais étonnamment pratiques, des Chrome DevTools.
Le Mode Conception
Une action fréquente pour les développeurs est d’examiner un élément d’une page, puis de modifier son code HTML pour prévisualiser un effet ou tester une modification.
Toutefois, l’édition du HTML directement dans les DevTools n’est pas toujours aisée. Naviguer dans la structure des balises, chercher les balises ouvrantes/fermantes et gérer les espaces lors de l’édition de texte (alors qu’ils sont invisibles dans le rendu visuel) peut s’avérer fastidieux. C’est d’autant plus vrai pour les designers qui ne souhaitent pas s’encombrer de ce désordre.
Voici une capture d’écran d’une page de ce site (toptips.fr):
Le HTML imbriqué et les classes CSS complexes sont typiques des sites web modernes, rendant l’expérience DevTools parfois frustrante. 🤭
Heureusement, le mode Conception des DevTools peut atténuer ces difficultés. En activant ce mode (ce n’est pas son nom officiel, mais celui que les utilisateurs lui ont attribué), la page peut être éditée visuellement et en direct, à la manière d’une feuille de calcul ou d’un éditeur de texte ! Malheureusement, cette option n’est pas activée par défaut et son activation peut être déroutante, en particulier pour les non-développeurs.
Cependant, la démarche est plutôt simple ; il suffit de suivre ces instructions. Selon votre niveau de familiarité avec le sujet, cela sera un jeu d’enfant ou demandera un peu de concentration. Voici les étapes à suivre :
- Assurez-vous que la page que vous souhaitez modifier est chargée et active dans votre navigateur.
- Ouvrez le panneau DevTools comme vous le faites habituellement (via un raccourci clavier, un clic de souris, etc.). Sur Mac, le raccourci Opt + Cmd + I fonctionne très bien.
- Une fois les DevTools ouverts, dirigez-vous vers l’onglet « Console ». Certains d’entre vous trouveront peut-être ces instructions évidentes, mais n’oublions pas les personnes qui ont du mal avec la console du navigateur et JavaScript.
- Cliquez sur la première ligne, là où le curseur est positionné, ce qui permettra d’entrer du code JavaScript (voir la capture d’écran ci-dessous).
- Il est temps de taper du code JavaScript. Pas de panique, c’est très court et simple : document.designMode = « on ». Vous pouvez également copier/coller ce code depuis cette page, ou si vous êtes à l’aise, le saisir directement.
- Appuyez sur la touche Entrée/Retour.
« C’est tout ?! »
Oui, c’est bien tout !
Vous pouvez maintenant modifier librement le contenu de la page comme s’il s’agissait d’un document texte. Voici un exemple de vidéo où j’édite le site web Spotify en direct grâce au mode Conception :
Le mode Conception, aussi pratique soit-il, n’est pas une solution universelle. On ne peut, par exemple, facilement copier-coller des boutons ou modifier leur apparence. Ses possibilités sont limitées par rapport à un éditeur web visuel. Néanmoins, il est très utile lorsque le contenu doit être modifié visuellement à la volée.
On peut penser que les équipes de Chrome évaluent l’accueil réservé à cette fonctionnalité. Si elle est bien reçue et répond à un besoin, il est fort probable que des capacités d’édition plus avancées soient ajoutées par la suite ! 🤞🏻🤞🏻
Simulation des conditions réseau
L’onglet Réseau des Chrome DevTools est probablement le plus utilisé (je n’ai pas de statistiques précises, mais en tant que développeur web, j’utilise la Console environ 20 à 30 % du temps, et le reste du temps, l’onglet Réseau). Il nous fournit des informations détaillées sur les requêtes envoyées par la page, leur type, leurs métadonnées, leur statut, la progression du téléchargement des ressources (images, feuilles de style, etc.) et leurs temps de chargement. Avec une telle utilité, il n’est pas surprenant que cet onglet soit si populaire.
Il est cependant facile de passer à côté de la fonctionnalité dont nous allons parler. Vous n’avez peut-être pas remarqué la liste déroulante qui affiche « En ligne ».
En cliquant dessus, une liste d’options s’affiche, vous permettant de simuler différentes vitesses de connexion : Fast 3G, Slow 3G, Hors ligne, etc. Cette fonctionnalité est utile dans de nombreuses situations, notamment pour tester les performances d’un site web sur des réseaux lents ou pour vérifier le comportement d’une application web hors ligne.
Essayons cela. Je vais choisir l’option « Slow 3G » et recharger la même page que précédemment. Avant de faire cela, regardez comment, avec ma connexion haut débit actuelle (40 Mbps), la plupart des ressources se téléchargent en moins de 100 millisecondes.
Maintenant, voyons l’impact d’une connexion 3G lente.
Quelle différence !
Les temps de chargement des ressources varient maintenant entre 5 et 10 secondes. De plus, le site a mis 17,25 secondes à se charger complètement ! Il est vrai que sur une connexion 3G lente, n’importe quel site web moderne mettra plusieurs secondes à se charger. Rendre un site web rapide sur les réseaux lents est un défi, mais cela doit être une décision commerciale où les bénéfices justifient les efforts.
Dans la capture d’écran ci-dessus, notez l’icône d’avertissement dans l’onglet Réseau. C’est ainsi que Chrome vous rappelle que vous avez modifié des paramètres par défaut, et à moins que vous ne soyez sûr de ce que vous faites, vous devriez peut-être les réinitialiser.
Le Sélecteur de couleurs interactif
L’inspection des éléments DOM dans les DevTools est une tâche quotidienne pour nous tous. Nous sommes également familiers avec la section des détails CSS qui s’affiche à côté et que nous pouvons modifier en direct.
Un petit détail pratique, caché parmi tout cela, est le sélecteur de couleurs qui apparaît lorsque vous cliquez sur une propriété de couleur CSS !
Ce n’est pas un simple sélecteur de base. Il permet de gérer la transparence, de modifier les systèmes de couleurs, de choisir une couleur directement à partir de la page et bien plus encore.
Ainsi, la prochaine fois que vous explorerez les couleurs d’accentuation d’un site, vous n’aurez pas à déterminer ou à deviner la bonne teinte ! De nombreux développeurs préfèrent concevoir leurs sites web directement dans le navigateur. Pour eux, ce type de fonctionnalité est une bénédiction ! 🙂
La Surveillance des événements sur les éléments de la page
Il arrive souvent que l’on veuille savoir ce qui se passe avec un élément spécifique. C’est particulièrement vrai quand on utilise jQuery dans une base de code complexe : les gestionnaires d’événements et la logique sont dispersés partout, et la recherche d’un bug peut vite devenir un cauchemar.
Heureusement, Chrome DevTools propose une fonction pratique pour cela : la surveillance d’événements sur un élément. Cette option consigne tous les événements dans la console. Un petit inconvénient : elle ne prend pas en charge la sélection d’éléments par nom de classe CSS. La méthode jQuery $(« #email ») n’est pas disponible. 🙂
Voyons comment cette fonctionnalité fonctionne. On commence par une simple inspection d’un élément en utilisant l’inspecteur DevTools. Oui, celui que nous utilisons tous les jours.
Dans la capture d’écran ci-dessous, j’ai utilisé l’outil d’inspection pour sélectionner le champ de saisie de texte. L’élément de la page n’est pas mis en surbrillance, mais le code HTML correspondant est sélectionné dans les DevTools.
L’élément sélectionné peut être utilisé comme variable JavaScript spéciale nommée $0 pour la surveillance d’événements. Ensuite, en veillant à ne pas cliquer ailleurs (notamment dans la section de code HTML), je clique sur la console et j’ajoute un écouteur d’événement à ce champ de texte. Pour cela, une seule ligne de code suffit : monitorEvents($0, ‘mouse’). La partie « mouse » indique à Chrome que je ne suis intéressé qu’aux événements liés à la souris.
Dès que j’appuie sur Entrée/Retour, la surveillance est activée. Si je survole ou clique sur le champ de texte, ces événements sont enregistrés dans la console sous forme d’objets JavaScript :
Comme on le voit sur la capture d’écran, plusieurs événements de souris ont été enregistrés lorsque j’ai cliqué sur l’élément, tapé mon nom puis éloigné la souris (les événements de frappe, étant liés au clavier, n’ont pas été enregistrés). Les événements sont des objets JavaScript, chacun contenant une grande quantité d’informations. Par exemple, j’ai développé l’objet « click », et le nombre de ses propriétés ne tenait pas dans une seule capture d’écran !
Je vous encourage à essayer cette fonctionnalité, car elle vous évitera certainement beaucoup de maux de tête dans vos projets futurs !
Rapports sur les performances d’un site web
De nos jours, les performances d’un site web sont un facteur clé de succès. Même une petite amélioration des performances peut apporter des gains significatifs en matière de référencement et de satisfaction des utilisateurs. Mais comment savoir quelles parties d’un site web nécessitent une attention particulière ?
Faut-il engager une équipe d’experts et attendre patiemment des jours ?
Dans certains cas, c’est nécessaire, mais heureusement, Chrome DevTools offre des outils pour nous faciliter la tâche. Dans les dernières versions de Chrome (fin 2020), vous trouverez un onglet Lighthouse dans les DevTools. Il y a quelques mois, il s’appelait « Audits », et c’est toujours le nom que vous trouverez dans la documentation officielle. Lighthouse était à l’origine un site web permettant de tester gratuitement les performances d’un site. Google l’a ensuite supprimé, mais heureusement, cette fonctionnalité a refait surface dans les DevTools.
Pour générer un rapport de performance, il suffit d’appuyer sur un seul bouton une fois la page souhaitée chargée :
Comme on le voit sur la capture d’écran, vous pouvez choisir les informations et les tests que vous souhaitez réaliser. Une fois les paramètres définis, cliquez sur le bouton bleu et patientez. Après quelques secondes, vous obtiendrez un rapport détaillé comme celui-ci :
Les chiffres indiquent le score global pour chaque catégorie. La catégorie « Progressive Web App » (PWA) est désactivée, car ce site web ne prend pas en charge les fonctionnalités PWA. Comme on le voit par la barre de défilement, le rapport est plutôt long.
Voici un aperçu de la section sur les performances :
Je ne prétends pas que Lighthouse et ses suggestions soient la solution miracle aux problèmes de performances d’un site web, mais elles sont extrêmement utiles. Souvent, les propriétaires de sites web et les développeurs n’ont qu’une vague idée des problèmes existants et de comment les résoudre.
Même en tant que développeur web, je me sens parfois perdu car les performances et les tests sont des domaines spécialisés. Lighthouse, un outil méconnu, intégré aux Chrome DevTools, est extrêmement pratique pour les propriétaires d’entreprises, les développeurs et les administrateurs système.
Les Fonctions d’édition de code
L’onglet Sources des DevTools donne accès à divers fichiers chargés par un site web. Il permet également d’éditer le code, d’enregistrer des extraits, etc. Les développeurs web ne devraient pas être surpris. Cependant, les DevTools intègrent des fonctionnalités qui facilitent la vie des développeurs habitués à leurs IDE de code préférés.
Les DevTools utilisent des raccourcis clavier bien connus qui permettent de gagner du temps. Par exemple, Ctrl + D (ou Cmd + D sur Mac) peut servir à sélectionner plusieurs occurrences d’un mot. De même, maintenir Ctrl (ou Cmd sur Mac) tout en cliquant sur plusieurs lignes permet d’ajouter plusieurs curseurs. La vidéo ci-dessous illustre ce fonctionnement :
Si cela vous semble intéressant, n’hésitez pas à vous plonger dans la documentation officielle pour découvrir toutes les fonctionnalités d’édition de code offertes par les DevTools.
Contrôler l’état des éléments DOM
Il arrive parfois, en testant ou en déboguant, que le comportement recherché ne soit disponible que dans un état particulier d’un élément. Cela peut parfois être frustrant. Pour moi, c’est le cas de l’état « survol ». J’ai perdu des heures à essayer de déclencher cet état, ou à ajouter du CSS supplémentaire pour le forcer.
Heureusement, les Chrome DevTools offrent une manière simple de modifier l’état d’un élément inspecté. L’option est accessible via un clic droit sur l’élément dans l’onglet Éléments. Toutefois, avec la multitude de fonctionnalités et la pression du travail, elle peut facilement passer inaperçue :
Oui, c’est aussi simple que ça !
Plus besoin d’intégrer de la logique de test conditionnelle dans votre code, d’écrire du CSS supplémentaire ou de suivre d’autres étapes fastidieuses lorsque vous souhaitez observer un élément dans un état différent.
Le Panneau Outils
Enfin, le panneau Outils. Une fonctionnalité incroyablement utile mais bien cachée, accessible uniquement via un raccourci clavier. Comme son nom l’indique, le panneau Outils n’est pas un outil unique, mais plutôt un tableau de bord regroupant toutes les fonctions des DevTools. Étant donné la grande quantité de fonctions disponibles, une barre de recherche est située en haut.
Pour activer le panneau Outils, assurez-vous d’être dans les DevTools, puis appuyez sur Ctrl + Maj + P (ou Cmd + Maj + P pour les utilisateurs Mac) :
Le panneau Outils est rempli de fonctionnalités et de surprises. Par exemple, saviez-vous que vous pouvez prendre une capture d’écran directement depuis les DevTools ?
Probablement pas. Pour le découvrir, vous devrez ouvrir le panneau Outils et taper « capture d’écran » dans la barre de recherche :
Vous remarquerez aussi plusieurs options de capture, notamment celle du nœud DOM sélectionné ! Explorez davantage le panneau Outils, vous ne serez pas déçu !
Si vous devez prendre une capture d’écran d’une page web à distance, consultez l’outil de capture d’écran toptips.fr.
Conclusion
Le navigateur Chrome est riche en fonctionnalités, mais ce sont les DevTools qui font réellement sa force. Comme nous l’avons vu, de nombreuses fonctionnalités sont bien cachées – ou à la vue de tous – et une majorité d’utilisateurs les ignorent. Pourquoi sont-elles si discrètes ?
Certaines sont expérimentales (comme le mode Conception), et les développeurs de Chrome veulent les garder à l’abri des utilisateurs lambda. D’autres, quant à elles, sont simplement victimes d’une surcharge d’informations. Avec, disons, 120 fonctionnalités (certaines avec des sous-fonctionnalités), il est difficile de concevoir une interface utilisateur idéale. Google n’a pas toujours excellé dans l’UX de ses produits, et c’est un fait. 🤷🏻♂️
Quoi qu’il en soit, j’espère que ces découvertes vous seront utiles. Et surtout, j’espère que cet article vous a donné une idée de ce qui se cache où, afin que la prochaine fois que vous chercherez une fonctionnalité spécifique, vous sachiez où « creuser ». 😆