Chrome DevTools est l’une des principales raisons pour lesquelles les développeurs refusent de toucher à tout autre navigateur.
Mais la plupart d’entre nous n’utilisons qu’une poignée de fonctionnalités, en restant inconscients de nombreuses autres fonctionnalités époustouflantes qui sont publiées en silence.
Découvrons quelques-uns de ces joyaux cachés !
Tout le monde a son système d’exploitation préféré, sa plate-forme matérielle, son type d’appareil, son facteur de forme, etc. Mais une chose est commune à tous : ils utilisent le navigateur Chrome et uniquement le navigateur Chrome ! Je pense qu’il est prudent de dire que la guerre des navigateurs est terminée et que Chrome a gagné de manière convaincante.
Les utilisateurs de Windows utilisent le navigateur par défaut uniquement pour télécharger Chrome, puis utilisent Chrome, en ignorant toutes les « recommandations » de Windows. Il en va de même pour les appareils d’Apple (en particulier les MacBook et les appareils à écran plus grand), où les utilisateurs et les développeurs évitent Safari, malgré les nombreuses revendications et tactiques de conversion d’Apple.
Et si un appareil n’exécute pas Chrome, il y a de fortes chances qu’il exécute un dérivé compatible avec Chrome, tel que Braver ou Vivaldi. Oui, je sais, techniquement, ces navigateurs ne sont pas basés sur Chrome, mais c’est une autre discussion. L’utilisateur moyen peut utiliser ces autres navigateurs pour des raisons idéologiques ou spéciales, mais en ce qui concerne les développeurs, il n’y a pas d’autre navigateur en vue que Chrome.
Même le fait que ce soit un monstre mangeur de mémoire est ignoré. La raison est simple : Outils de développement Chrome.
Source de l’image : documentation officielle de Chrome DevTools
Maintenant, si vous lisez cet article, il est prudent de supposer que vous êtes soit un utilisateur expérimenté, un bricoleur, un développeur Web ou quelque chose du genre. En tant que tel, aucun de nous n’a besoin d’une introduction à DevTools, comment l’ouvrir, ses différentes fonctionnalités, etc.
Au lieu de cela, sans perdre de temps, plongeons directement dans certaines des fonctionnalités moins connues mais étonnamment utiles de Chrome DevTools.
Table des matières
Mode Conception
L’une des choses que les développeurs font régulièrement est d’inspecter un élément sur la page, puis de modifier son code HTML pour prévisualiser quelque chose ou tester l’effet d’un changement.
Cependant, travailler avec HTML directement dans les DevTools n’est pas la chose la plus simple qui soit – patauger dans la soupe de balises, fatiguer vos yeux en essayant de trouver le bon crochet ouvrant/fermant et gérer une quantité ridicule d’espaces blancs lors de l’édition de texte (espaces blancs qui est clairement absent du document que vous voyez), sont quelques-uns des problèmes auxquels vous pouvez avoir à faire face. C’est encore pire si vous êtes un designer et que vous ne voulez pas passer au crible le désordre.
Voici une capture d’écran d’une des pages de ce même site Web (toptips.fr):
Le HTML profondément imbriqué et les classes CSS mystérieuses et déroutantes sont typiques de tout site Web non trivial aujourd’hui, où l’expérience avec DevTools est pour le moins sous-optimale. 🤭
Mais il existe une fonctionnalité DevTools appelée Design Mode, qui peut atténuer la douleur dans de nombreux cas. En utilisant le mode Design (ce n’est pas le nom officiel, soit dit en passant ; c’est juste le nom que les gens lui ont donné en raison de la façon dont il est activé et de ce qu’il fait — ne vous inquiétez pas, nous verrons très bientôt !), la page peut être réalisée visuellement et en direct, tout comme l’édition d’une feuille de calcul ou d’un éditeur de texte ! Le seul problème est que cette fonctionnalité n’est pas activée par défaut, et l’activer est un peu un casse-tête, en particulier pour les non-développeurs.
Dans tous les cas, cela est assez simple; tout ce que vous avez à faire est de suivre les instructions ci-dessous. Selon l’endroit où vous vous situez sur la courbe de sophistication de l’utilisateur, cela peut être ridiculement facile ou modérément difficile. Voici ce qu’il faut faire :
- Assurez-vous que la page Web que vous souhaitez modifier est chargée et que vous la consultez actuellement (c’est-à-dire que l’onglet en question est celui qui est actif).
- Ouvrez le panneau DevTools comme vous le faites habituellement (raccourci clavier, clics de souris, peu importe). J’aime utiliser les raccourcis clavier, et sur Mac, Opt + Cmd + I fait le travail.
- Maintenant, avec les DevTools ouverts, accédez à l’onglet appelé « Console ». Certains d’entre vous roulent peut-être des yeux en voyant à quel point tout cela semble idiot et évident, mais bon, pensons aussi aux (des centaines de ?) milliers de personnes qui ont du mal à travailler avec la console du navigateur et JavaScript (pour une raison quelconque ).
- Cliquez sur la première ligne à côté du curseur, qui présentera alors une invite de saisie, et maintenant vous pourrez y écrire du code JavaScript (voir la capture d’écran un peu plus bas).
- Maintenant, nous devons écrire du code JavaScript. Ne vous inquiétez pas, car ce que vous devez écrire/taper est très court et simple : document.designMode = « on ». Vous pouvez également copier et coller le code de cette page (si vous le faites, assurez-vous que la mise en forme n’est pas copiée – nous n’avons besoin que de texte brut) ou si vous vous sentez en confiance, tapez-le.
- Appuyez sur Entrée/Retour.
« C’est ça??! »
Ouais, c’est tout !
Vous pouvez maintenant apporter librement des modifications à la page comme s’il s’agissait d’un document. Regardez cet exemple de vidéo où j’édite en direct le site Web Spotify en utilisant le mode Design :
La fonction Design Mode, aussi excitante soit-elle, n’est pas une solution miracle ; vous ne pouvez pas, par exemple, copier-coller facilement des boutons, modifier leur apparence, etc. Le nombre réel de choses qu’il peut faire par rapport à un éditeur de page Web visuel de rêve est très faible ; cependant, cela résout les cas d’utilisation où le contenu doit être modifié visuellement et à la volée.
Cela dit, il n’est pas exagéré de prétendre que les gens de Chrome testent la qualité de réception de cette fonctionnalité ; s’il trouve une bonne réception et un cas d’utilisation solide, il est raisonnable de s’attendre à ce que des capacités d’édition plus puissantes suivent bientôt ! 🤞🏻🤞🏻
Simulation des conditions du réseau
L’onglet Réseau de Chrome DevTools est peut-être celui qui est le plus utilisé (je n’ai pas de données à ce sujet, bien sûr, mais en tant que développeur Web, j’ai tendance à utiliser l’onglet Console peut-être 20 à 30 % du temps, et le l’onglet Réseau le reste du temps). Il nous donne toutes sortes d’informations sur les requêtes effectuées à partir de la page, leur type, les métadonnées/en-têtes, le statut, la progression du téléchargement des actifs (images, feuilles de style, etc.), les temps de chargement, etc. Avec une utilité aussi incroyable, il n’est pas étonnant que l’onglet Réseau soit le plus courant.
Et pourtant, il est facile de rater la fonctionnalité dont nous parlons ; vous n’avez peut-être pas remarqué une liste déroulante inoffensive qui indique l’évidence : en ligne.
Si vous cliquez dessus, vous verrez une liste déroulante avec diverses options qui vous permettent de limiter la vitesse du réseau : Fast 3G, Slow 3G, Offline, etc. Bien qu’il puisse y avoir plusieurs cas d’utilisation pour cette option, le plus courant est de tester le site Web les performances sur les réseaux lents ou le comportement des applications Web hors ligne (en supposant que de telles fonctionnalités ont été ajoutées).
Prenons cela pour un tour. Je vais régler le réseau sur « Slow 3G » et recharger la même page de la capture d’écran précédente. Avant de faire cela, remarquez dans la capture d’écran précédente comment, sur ma connexion réseau actuelle (un haut débit de 40 Mbps), la plupart des actifs sont téléchargés en moins de 100 millisecondes.
Et maintenant, il est temps de voir ce que la lenteur de la 3G lui fait.
Quelle différence!
Notez que le temps de chargement des ressources est désormais compris entre 5 et 10 secondes. De plus, le site a fini de se charger complètement en 17,25 secondes ! Oui, je sais ce que vous pensez, mais vous devez considérer que sur un réseau 3G lent, tout site Web moderne prendra plusieurs secondes à se charger. Que vous souhaitiez un chargement rapide sur des réseaux lents est une autre chose, mais dans l’ensemble, cela doit être une décision commerciale où les gains justifient l’effort.
Dans la capture d’écran ci-dessus, notez l’icône d’avertissement dans l’onglet Réseau. C’est la façon dont Chrome vous rappelle que vous avez apporté des modifications persistantes non par défaut, et à moins que vous ne sachiez ce que vous faites, vous devriez peut-être le réinitialiser.
Sélecteur de couleurs interactif
L’inspection des éléments DOM dans DevTools est quelque chose que nous faisons tous à peu près tous les jours. Nous sommes également habitués à la section des détails CSS affichée à côté, et nous savons que nous pouvons la modifier et voir les résultats immédiatement.
Une petite commodité cachée parmi tout cela est que si vous cliquez sur une propriété de couleur CSS, une interface de sélection de couleurs familière apparaîtra !
Notez qu’il ne s’agit pas d’un simple sélecteur de couleurs de base. Il vous permet de contrôler la transparence, de modifier les systèmes de couleurs utilisés, de choisir une couleur directement à partir de la page, et bien plus encore.
Ainsi, la prochaine fois que vous expérimenterez les couleurs d’accentuation d’un site, par exemple, vous n’aurez pas besoin de déterminer ou de deviner la bonne valeur pour la teinte que vous avez en tête ! En fait, de nombreuses personnes aiment concevoir des sites Web directement dans le navigateur. pour eux, des fonctionnalités comme celles-ci sont une aubaine ! 🙂
Surveillance des événements sur les éléments de la page
Nous sommes souvent dans une situation où nous aimerions savoir ce qui se passait avec cet élément spécifique qui nous intéresse. Cela est particulièrement vrai lorsque vous utilisez jQuery dans une base de code non triviale – que ce soit la vôtre ou celle des autres ; les gestionnaires d’événements et la logique sont dispersés partout, et la recherche d’un bogue peut être un cauchemar.
Heureusement, Chrome DevTools a une fonctionnalité astucieuse pour cela. Il observera l’élément indiqué pour vous et consignera les événements dans la console. Mais il y a un peu de déception : cette fonctionnalité n’a pas de capacités de sélection d’éléments basées sur les noms de classe CSS. Ainsi, la méthode jQuery de $(« #email ») n’est pas disponible. 🙂
Cela dit, voyons comment le faire fonctionner. Nous commençons par faire un simple « élément d’inspection » à l’aide de l’inspecteur DevTools. Oui, c’est le même outil d’inspection que nous utilisons tous les jours.
Dans la capture d’écran ci-dessous, j’ai utilisé l’outil d’inspection pour mettre en surbrillance la saisie de texte. Par « surligner », je ne veux pas dire que l’élément de la page est surligné (ce n’est pas le cas, comme vous pouvez le voir) ; au lieu de cela, le curseur de l’inspecteur a été cliqué sur la saisie de texte et le code HTML correspondant dans DevTools est mis en surbrillance.
Cela cible l’élément actuellement inspecté pour la surveillance des événements, ce qui rend l’élément accessible en tant que variable JavaScript spéciale appelée $0. Ensuite, en veillant à ne pas cliquer ailleurs sur la fenêtre du navigateur par inadvertance (en particulier la partie code HTML), je clique sur la console et j’attache un écouteur d’événement pour cette entrée de texte. Pour cela, tout ce dont j’ai besoin est une seule ligne de code : monitorEvents($0, ‘mouse’). La partie « souris » ici indique à Chrome que je ne suis intéressé que par la surveillance des événements basés sur la souris.
Dès que j’appuie sur Entrée/Retour, la surveillance est activée, et si je survole ou clique maintenant sur l’entrée de texte, ces événements sont enregistrés dans la console en tant qu’objets JavaScript :
Comme vous pouvez le voir sur la capture d’écran, plusieurs types d’événements de souris ont été capturés alors que je cliquais sur l’élément, tapais mon nom, puis éloignais la souris (les événements de frappe, étant des événements de clavier, n’étaient pas enregistrés). Les événements sont eux-mêmes des objets JavaScript, comme le montre clairement la capture d’écran ; chaque objet événement contient une énorme quantité d’informations. Par exemple, j’ai développé l’objet d’événement « clic », et le nombre de propriétés ne pouvait pas tenir dans une seule capture d’écran !
Je vous encourage fortement à essayer cette fonctionnalité tout de suite car elle vous évitera certainement beaucoup de maux de tête dans vos projets à venir !
Rapports sur les performances du site Web
De nos jours, les performances du site Web font ou détruisent une entreprise / un site Web. Même une petite augmentation des performances se traduit par des gains de référencement massifs ainsi que par la satisfaction des utilisateurs. Mais comment savez-vous quelles parties de votre site Web ont besoin d’attention et lesquelles sont déjà bonnes ?
Vous avez besoin d’engager une équipe d’experts et d’attendre patiemment quelques jours ?
Eh bien, il y a des cas où cela doit être fait, mais heureusement, Chrome DevTools nous couvre tous. Dans les dernières versions de Chrome (fin 2020), vous trouverez un onglet Lighthouse dans les DevTools. Il y a quelques mois, cela s’appelait Audits, et assez déroutant, c’est le nom que vous trouverez dans les documents officiels au moment de la rédaction. Quoi qu’il en soit, le fait est que Lighthouse était autrefois un site Web à la mode permettant de vérifier gratuitement les performances du site Web, mais Google l’a ensuite supprimé (aucune raison n’a été donnée). Heureusement, la même fonctionnalité puissante a refait surface plus tard dans DevTools.
Pour générer un rapport de performances, il vous suffit d’appuyer sur un seul bouton après le chargement de la page qui vous intéresse :
Comme vous pouvez le voir sur le côté droit de la capture d’écran, il existe quelques options pour contrôler la quantité d’informations que vous souhaitez (et, bien sûr, ce que vous souhaitez tester). Une fois que vous êtes satisfait des paramètres, appuyez sur ce gros bouton bleu, asseyez-vous et détendez-vous. Quelques secondes plus tard, vous aurez un rapport bénéfique ressemblant à ceci :
Les chiffres que vous voyez dans la capture d’écran ci-dessus indiquent le score global pour chaque catégorie. La catégorie des applications Web progressives (PWA) est grisée, probablement parce que ce site Web n’a pas de fonctionnalités PWA. De plus, comme vous pouvez le voir par la taille de la barre de défilement dans la capture d’écran (tout à droite), c’est un long rapport.
Voici à quoi ressemble une partie de la section sur les performances :
Je ne prétendrai pas que Lighthouse et ses suggestions sont le Saint Graal des performances d’un site Web, mais elles sont extrêmement utiles. c’est parce que les propriétaires de sites Web et les développeurs ont rarement la moindre idée des problèmes qui existent et de la manière exacte de les résoudre.
Honnêtement, même moi, je me sens perdu en tant que développeur Web, car les performances et les tests ont tendance à être des spécialisations en quelque sorte. En tant que tel, Lighthouse est un outil peu connu et sous-estimé, qui fait maintenant partie de Chrome DevTools, qui est d’une immense utilité pour les propriétaires d’entreprise et les développeurs/administrateurs système.
Prouesse d’édition de code
L’onglet Sources de DevTools nous permet d’accéder à divers fichiers chargés par le site Web. Il a également des fonctionnalités telles que l’édition de code, l’enregistrement d’extraits, etc. Cela ne devrait pas surprendre les développeurs Web. Cependant, DevTools a également quelques commodités intégrées qui facilitent la vie des développeurs habitués à leurs IDE de code préférés.
DevTools utilise des raccourcis clavier bien connus qui vous feront gagner du temps et minimiseront la frustration liée au code. Par exemple, Ctrl + D (ou Cmd + D sur Mac) peut être utilisé pour mettre en surbrillance plusieurs occurrences d’un mot. De même, maintenir Ctrl (ou Cmd sur Mac) et cliquer à plusieurs endroits dans le code vous donne plusieurs curseurs. Regardez la vidéo ci-dessous pour vous faire une meilleure idée :
Si vous pensez que c’est cool, assurez-vous de vous plonger dans la documentation officielle pour profiter de toutes les fonctionnalités d’édition de code que DevTools a à offrir.
Contrôler l’état des éléments DOM
Parfois, nous testons ou déboguons quelque chose, mais le comportement que nous recherchons n’est disponible que dans un état d’élément particulier. Selon l’état dans lequel il se trouve, vous pourriez finir par passer un moment terrible; pour moi, c’est l’état « survol », car je me souviens d’avoir perdu d’innombrables minutes à essayer de chronométrer l’action de survol ou d’ajouter des CSS supplémentaires et temporaires, etc.
Heureusement, Chrome DevTools dispose d’un moyen simple de modifier l’état d’un élément inspecté. De plus, l’option de le faire est là si nous faisons un clic droit sur l’élément (dans l’onglet Éléments), mais étant donné le nombre de fonctionnalités et les pressions d’une journée de travail, il est facile de l’oublier :
Oui, c’est vraiment aussi simple que ça !
Désormais, vous n’avez plus besoin d’intégrer une logique de test conditionnel dans votre code, d’écrire du CSS supplémentaire ou de passer par d’autres étapes lorsque vous observez un élément dans un état différent.
Panneau Outils
Le dernier mais non le moindre sur cette liste est le panneau Outils. C’est une autre de ces fonctionnalités incroyablement utiles qui sont bien cachées et ne peuvent être vues qu’à l’aide de raccourcis clavier. Comme son nom l’indique, le panneau Outils n’est pas un outil unique mais une sorte de tableau de bord où presque toutes les fonctions de DevTool sont disponibles. Comme il existe beaucoup trop de fonctions offrant la fonctionnalité globale de DevTools, une barre de recherche est disponible tout en haut.
Pour activer le panneau Outils, assurez-vous que vous êtes dans le panneau DevTools, puis appuyez sur Ctrl + Maj + P (ou Cmd + Maj + P pour les utilisateurs Mac) :
Le panneau Outils regorge de fonctionnalités et de surprises. Par exemple, saviez-vous que vous pouviez prendre une capture d’écran directement depuis les DevTools ?
Je parie que non, car vous devrez ouvrir le panneau Outils et taper « capture d’écran » dans la barre de recherche pour découvrir cela :
Vous remarquerez également plusieurs options pour prendre des captures d’écran, dont une pour le nœud DOM sélectionné ! Explorez davantage le panneau Outils et je vous assure que vous ne serez pas déçu !
Si vous avez besoin de prendre une capture d’écran d’une page Web à distance, consultez l’outil de capture d’écran toptips.fr.
Conclusion
Le navigateur Chrome lui-même est riche en fonctionnalités, mais là où il brille vraiment, c’est l’offre DevTools. Comme nous l’avons vu dans cet article, il existe de nombreuses fonctionnalités bien cachées – et d’autres qui se cachent à la vue de tous – qu’une grande majorité d’utilisateurs ne connaissent pas. Pourquoi ces fonctionnalités sont-elles masquées ?
Je suppose que certaines d’entre elles sont très expérimentales (comme le mode Design), et les développeurs de Chrome veulent rendre difficile la recherche de ces fonctionnalités par les utilisateurs quotidiens. Pour le reste des nombreuses fonctionnalités, je pense qu’il s’agit simplement d’un cas de surcharge d’informations : s’il y a, disons, 120 fonctionnalités, certaines d’entre elles ayant des sous-fonctionnalités, etc., il est pratiquement impossible de concevoir la bonne interface utilisateur pour un tel un scénario. De plus, Google n’a historiquement pas fait un excellent travail avec l’UX de ses produits, alors voilà. 🤷🏻♂️
Quoi qu’il en soit, j’espère que vous avez trouvé certaines de ces fonctionnalités utiles. Mais plus important encore, 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 souhaitez explorer ou rechercher quelque chose de particulier, vous sachiez où aller pour « creuser profondément ». 😆