CR React Paris 2025 : Work Smarter, not Harder with Chrome DevTools

Le 20 et 21 mars 2025, nous avons eu la chance, en tant que passionnés, de participer à React Paris 2025, l’un des événements incontournables de la communauté web en France. Rassemblant des experts internationaux, des talks pointus et une ambiance résolument tournée vers l’innovation, cette édition a une fois de plus confirmé l’effervescence qui entoure l’écosystème React.

Dans son talk, Dominika Zajak prend le défi de nous rendre paresseux et paresseuses avec une énergie démentielle. Deux observations viennent nourrir l'importance de son talk :

• Les développeurs et développeuses prennent 20 fois plus de temps à lire et comprendre du code que d'en écrire (Bob C Martin)
• Debugger est deux fois plus difficile que d'écrire le code en premier lieu (loi de Kernighan)

Afin de rendre ces temps plus courts et productifs, Chrome DevTools est le meilleur ami des développeurs front. Pour y avoir accès, c'est très simple depuis Google Chrome : Un Cmd + Shift + I sur Mac ou un Ctrl + Shift + I sur les autres OS.

Dans cette section, on prend le défi de vous transformer en cool kid du front de votre équipe.

Débugger du CSS

"Ce n'est pas le bon bleu" ou "L'utilisateur n'arrive pas à voir le label"

Toujours les mêmes questions … Pour clarifier tout ça, dans votre panneau Chrome DevTools, cliquez sur les 3 petits points en haut à droite, puis sur “More Tools”, puis “CSS Overview”.

À partir d'ici, vous aurez accès à toutes les couleurs utilisées dans la page web, et aux éléments utilisant ces couleurs. Vous êtes prêt à avoir une discussion sereine pour choisir le bon bleu et les éléments problématiques.

Puis pour vos contrastes pas assez distincts, allez dans la section “Contrast Issues” et allez cibler l'élément problématique. Dans le panneau CSS, cliquez sur la couleur dans l’élément en question. Chrome DevTools vous indique si celle-ci respecte les ratios minimum demandés par le RGAA (4.5:1 pour le texte, 3:1 pour les composants d’interface et icônes). Puis il vous propose la couleur la plus proche respectant les critères. À vous de faire la modification.

"Ça s'affiche mal pour les personnes avec des déficiences visuelles"

Cliquez sur les 3 points en haut à droite, puis sur “More tools”, puis cliquez sur “Rendering” et sur “Emulate vision deficiencies”. Vous pouvez désormais naviguer sur votre site en simulant ces déficiences, et vous serez surpris par le nombre d'informations présentes uniquement dans les couleurs de votre site et qui sont donc inaccessibles pour ces personnes.

"Quelque chose ne va pas avec les lecteurs d'écrans"

Chrome dev tools nous permet d'accéder à l'arbre d'accessibilité qui contient les informations relatives à l'accessibilité de la plupart des éléments HTML. Il est utilisé par les lecteurs d’écrans et tout autre appareil permettant de naviguer sur le web autrement qu’avec nos yeux ou nos mains.

Pour y avoir accès, toujours après avoir cliqué les 3 points en haut à droite du panel, puis sur “More Tools”, cochez "Enable full-page accessibility tree". Ainsi, dans l'onglet élément affichant habituellement votre DOM, une petite icône vous permettra de transformer ce DOM en arbre d'accessibilité. Vous pourrez alors naviguer sur votre page comme un lecteur d'écran. Plus facile pour corriger les bugs découverts via celui-ci.

"Quelque chose clignote"

Utilisez le Rendering Tab ! Pour ce faire : Allez dans “More tools”, puis “Rendering”, et cochez “paint flashing”. Désormais, tous les composants qui sont re-rendu lors d'une action sur le site sont surlignés en vert. Plutôt pratique pour visualiser les composants qui se rechargent sans raison apparente.

"Comment ça s'afficherait si ..."

Utilisez le design mode ! Pour se faire, allez dans votre console et taper document.designMode = 'on'. Désormais vous pouvez changer le contenu de votre page comme si c'était un document de texte. Pratique pour faire des tests. Les Chromes DevTools servent aussi aux designers.

N’écrivez plus jamais vos tests end-to-end

"Le client a un problème à l'étape 6 du formulaire B3".

Vous avez sûrement eu ce genre de retour si vous avez travaillé sur une application web complexe. Et vous vous souvenez sûrement du nombre de fois où vous avez rejoué ce parcours pour vérifier si le bug est présent ou non.

Désormais Chrome DevTools vous permet de rejouer des parcours automatiquement grâce au Recorder. Pour ce faire, allez dans “More Tools”, et cliquez sur “Recorder”. Cliquez ensuite sur “Create Recording” après avoir donné un nom explicite à votre parcours. Puis naviguez dans le site pour reproduire le scénario voulu. Quand vous avez fini, cliquez sur “Stop Record”.

Maintenant, le recorder résume votre parcours dans une timeline que vous pouvez modifier. Par exemple, si vous avez coché la mauvaise checkbox, changez votre parcours directement dans la timeline. Vous pouvez rejouer le scénario automatiquement depuis les Chrome DevTools pour reproduire ce bug si difficile à reproduire.

Cerise sur le gâteau pour les fans de tests automatisés end-to-end, ce parcours peut être exporté vers des outils de tests e2e tel que puppeteer (directement intégré dans Chrome DevTools) ou bien vers Cypress et Playwright (si vous téléchargez le plugin adéquat).

Performance et débogage des problèmes réseau

“Peut t-on rendre cette page plus rapide ?”

La performance est le nerf de la guerre quand on parle de développement front web. OCTO en parle dans ce CR de Duck Conf 2025 : Des millisecondes contre des millions. N’hésitez pas à le consulter pour un bref rappel sur les Core Web Vitals. L'onglet Performance de Chrome DevTools vous donne accès à ces mesures.

Chrome DevTools vous permet de mettre en relation vos mesures avec celles des autres utilisateurs du site grâce aux field metrics. Avez-vous eu un chargement plus rapide que la plupart des utilisateurs ? Avez-vous un chargement aussi rapide que ceux qui utilisent un iPhone en 3G ? Chrome DevTools vous le dira. Il donne aussi des conseils pour améliorer la performance.

Sinon n'oubliez pas Lighthouse qui est toujours votre meilleur ami pour améliorer les performances de votre site en vous donnant des tips actionnables rapidement. Un score en dessous de 50 est mauvais, entre 50 et 90 est améliorable et très bon au-dessus de 90.

"Le backend est KO"

Plus de raison d'arrêter de sortir de son flow alors que le backend est down, grâce à la feature d'”overrides de requête”. Dans votre panel Network de Chrome DevTools, cliquez sur la requête qui vous importe et cliquez sur “Overrides Content” (ou “Overrides Headers” si vous voulez surcharger les en-têtes). Ainsi vous pouvez bouchonner les prochains appels à ce backend et faire en sorte que cette requête retourne la donnée de votre choix.

Autre tip utilisant les overrides : vous voulez savoir comment réagit votre web app quand une ressource n'arrive pas à se charger : bloquez cette requête et regardez comment réagit votre site.

En résumé, avant d'investir votre temps dans un nouvel outil, regardez si Chrome DevTools ne le fait pas déjà.