10 astuces de la Chrome Dev Tool que vous ne connaissez peut-être pas

L’actualité Front de ces deux derniers mois a été particulièrement chargée, Google I/O, JSConf.eu et VueConf sont notamment les événements auquel je me suis intéressé mais pour lesquels j’ai “oublié” de publier des articles. Cependant aujourd’hui, pour cause de 15Gs Timestamp Day et de Saint Fetnat, c’est férié en France, donc je vous offre un Short pour découvrir des features de la Chrome Dev Tool que vous ignorez peut-être. Celles-ci sont présentées en vrac sans ordre d’importance subjective.

Tip1 : CTRL+SHIFT+P

La commande palette donnant accès à toutes les fonctionnalités de votre éditeur de texte préféré fonctionne aussi sur la DevTool avec un moteur de recherche vous permettant de retrouver l’ensemble des fonctionnalités de cette dernière ce qui inclut celles qui vont suivre.

Par défaut la palette s’ouvre sur un > donnant accès aux fonctions, supprimez le et vous aurez la liste des fichiers, mettez un ? et vous verrez les différentes commandes.

Tip2 : Scroll Into View

Parfois on navigue sur l’interface graphique et on fait un clic droit pour retrouver l’arbre DOM correspondant (inspect), et parfois on se promène dans l’arbre DOM et on aimerait retrouver l’élément graphique correspondant, il suffit alors de faire un clic droit sur l’élément et d’appeler Scroll Into View et l’ascenseur se positionnera automatiquement à la bonne position.

Tip3 : etats hover, focus, active, visited

Afin de vérifier les styles CSS appliqués à un élément en cas de changement d’état, il est toujours compliqué de cliquer avec la souris tout en navigant dans la dev tool. Chrome a donc ajouté les filtres pour nous sauver la vie. il suffit de cliquer sur :hov tout en haut de l’écran Styles pour activer le menu magique :

Notez également le .cls à coté qui permet d’ajouter des classes au noeud DOM sélectionné.

Tip4: Color Palette

Marre de manipuler de l’hexadecimal pour vos couleurs ? Bonne nouvelle, chrome intègre un color picker très puissant, pour l’utiliser rien de plus simple : cliquer sur le carré de couleur afficher dans l’onglet Style (et non la valeur textuelle) vous obtiendrez alors un color picker vous proposant hexa, RGBA, HSLA, et clic souris. Egalement en bas la palette des couleurs utilisées dans la page, que vous pouvez switch a Material Design ou autre palette custom.

Tip5: Break On

Juste à coté du Scroll Into View se trouve l’option Break On qui permet de stopper le code JavaScript (mode debugger) au moment ou une modification du DOM se produit.

Tip6: Task Manager

Des difficultés pour mesurer la fuite mémoire de votre application ? Chrome vous fournit un task manager, celui-ci ne vous localisera pas exactement la fuite, mais vous permettra de la chiffrer en isolant parfaitement l’onglet ciblé. Cette option n’est pas dans la Dev Tool directement, mais dans Chrome :

Tip7: $0, $1, …, $_

Envie de retrouver dans la console chrome, l’historique des éléments DOM que vous avez sélectionné ? Que ce soit par clic dans l’inspecteur ou grâce à des querySelector ? Invoquez tout simplement en ligne de commande $0 pour récupérer le dernier, $1 l’avant dernier, … et $_ pour récupérer le dernier que vous avez demandé (cad $1 si vous avez demandé $1, $2 si vous avez demandé $2, …).

Tip8: Historique des requêtes

Tout le monde connait l’onglet Network mais savez vous que vous pouvez afficher dans ce dernier, quel requête charge quelle autre requête ? Pendant que vous survolez une requête, maintener enfoncer la touche SHIFT, vous verrez alors apparaître en vert les ancêtres, et en rouge les descendants de la requête en question. Ici cedriclegallo.fr est ancêtre de firebase-messaging.js lui même parent de manifest.json, cette option prend son sens quand les requêtes se multiplient (car dans mon exemple la colonne initiator suffit).

Tip9: Modifier la visibilité d’un élément DOM

Retour à l’inspecteur Elements, une fois un noeud sélectionné vous pouvez appuyer sur h pour le passer à visibility:hidden, et sur delete pour le supprimer du DOM (similaire à un display:none), CTRL+Z pour annuler la suppression. L’annulation fonctionne un peu partour dans la Dev Tool.

Tip10: Console Rendering

Vous la connaissiez peut-être déjà pour son FPS Meter, elle offre désormais une option Paint Flashing qui affiche les zones de votre SPA qui sont repaint en temps réel. L’effet est de joli rectangle vert à chaque fois que le navigateur repeint cet élément en particulier(tester en redimensionnant la fenêtre pour voir tous les rectangles de la page)

Conclusion

Voilà 10 petites astuces de la Dev Tool, il en existe plein d’autres et chaque version de chrome apporte son lot de nouveauté (Full-page screenshots, JS & CSS Coverage, … dans Chrome 59), j’espère que vous en ignoriez quelques unes, et que les avoir apprises va améliorer votre quotidien de développeur. A la prochaine.