Fonctionnalités méconnues de Chrome DevTools
Vous ouvrez probablement Chrome DevTools des dizaines de fois par jour. Console, Elements, Network — la boucle habituelle. Mais DevTools est devenu discrètement un environnement bien plus puissant, et la plupart de ses meilleures fonctionnalités se trouvent un menu plus loin que là où la plupart des développeurs s’arrêtent.
Voici les fonctionnalités moins connues de Chrome DevTools qui méritent d’être intégrées à votre flux de travail régulier.
Points clés à retenir
- CSS Overview fournit un audit complet des couleurs, polices et problèmes de spécificité — idéal pour repérer les incohérences de feuilles de style avant une refonte.
- Les Logpoints et les Breakpoints conditionnels permettent de déboguer sans modifier le code source, survivent aux rechargements à chaud et ne nécessitent aucun redéploiement.
- L’onglet Coverage quantifie le JavaScript et le CSS inutilisés par fichier, vous donnant des cibles concrètes pour le code splitting et le lazy loading.
- Les Layout Shift Regions du panneau Performance et la décomposition du thread principal vous aident à identifier les responsables du CLS et les recalculs de style coûteux.
- Le panneau Network Conditions, les outils de blocage de requêtes et l’onglet Initiator offrent un contrôle granulaire sur la simulation de requêtes et le traçage précis de la pile d’appels.
CSS Overview : le bilan de santé de vos feuilles de style
Comment l’ouvrir : Cliquez sur le menu à trois points (⋮) → More Tools → CSS Overview.
Lancez une capture et vous obtenez une ventilation complète de chaque couleur, famille de polices, taille de police, media query et problème de spécificité sur la page. Dans les grandes bases de code, c’est inestimable pour détecter des couleurs quasi-dupliquées comme #fff et #ffffff, ou des sélecteurs avec une spécificité si élevée qu’il est impossible de les surcharger proprement.
La section Font Info est particulièrement utile — elle montre la distribution réelle des tailles et graisses de polices rendues, ce qui révèle souvent des incohérences que les design tokens étaient censés prévenir.
Astuce : Utilisez CSS Overview avant une refonte de design system. Cela vous donne une image claire du désordre avant de commencer à le nettoyer. Consultez la documentation officielle de CSS Overview pour plus de détails.
Débogage avancé dans Chrome DevTools : les Logpoints plutôt que console.log
Arrêtez de parsemer votre code source de console.log. Dans le panneau Sources, faites un clic droit sur n’importe quel numéro de ligne et choisissez Add Logpoint. Tapez n’importe quelle expression — elle s’affiche dans la console sans toucher à votre code.
C’est l’une des techniques de débogage Chrome DevTools les plus sous-utilisées. Les Logpoints survivent aux rechargements à chaud, ne nécessitent pas de redéploiement et disparaissent proprement quand vous avez terminé. Associez-les aux Conditional Breakpoints (clic droit → Add Conditional Breakpoint) pour mettre en pause l’exécution uniquement lorsqu’une expression spécifique est vraie — utile pour déboguer des bugs intermittents qui n’apparaissent qu’après la 50ᵉ itération d’une boucle.
Onglet Coverage : trouver et éliminer le code inutilisé
Comment l’ouvrir : Menu à trois points → More Tools → Coverage.
Appuyez sur enregistrer, interagissez avec votre page, puis arrêtez. DevTools vous montre exactement quel pourcentage de chaque fichier JS et CSS n’a jamais été exécuté. Un fichier qui affiche 60 à 70 % de code inutilisé est un candidat pour le code splitting ou le lazy loading.
Le flux de travail est simple : Coverage → identifier le code mort → diviser ou différer → mesurer l’amélioration du LCP et du TTI. Cela impacte directement vos scores de Core Web Vitals.
Astuce : Coverage ne prend pas en compte le code déclenché par les interactions. Enregistrez en parcourant vos flux utilisateurs clés, pas seulement au chargement de la page.
Discover how at OpenReplay.com.
Insights du panneau Performance : déboguer les Layout Shifts et le recalcul de style
Le panneau Performance a considérablement mûri. Enregistrez une session et examinez la décomposition du Main thread — en particulier les événements Style Recalc et Layout. Un seul changement de propriété CSS sur un élément parent peut déclencher un recalcul complet de la mise en page sur des centaines de nœuds DOM.
Pour déboguer le CLS, activez Layout Shift Regions via le tiroir Rendering (menu à trois points → More Tools → Rendering) avant d’enregistrer. Les éléments déplacés sont surlignés avec une superposition bleue image par image, rendant immédiatement évident quel élément a bougé et quand.
Évitez d’interroger des propriétés de mise en page comme offsetHeight ou getBoundingClientRect() dans des boucles — chaque appel force une mise en page synchrone, ce qui s’accumule rapidement.
Panneau Network Conditions : simulation et traçage granulaires des requêtes
La plupart des développeurs connaissent la limitation globale du réseau dans l’onglet Network. Moins nombreux sont ceux qui connaissent les panneaux Request Blocking et Network Conditions, accessibles via le menu à trois points → More Tools.
Le panneau Network Conditions vous permet de remplacer le user agent et de désactiver le cache globalement. La limitation réseau elle-même est généralement contrôlée depuis le menu déroulant de throttling de l’onglet Network, qui simule des connexions plus lentes pour les tests. Les versions plus récentes de DevTools prennent également en charge une limitation plus granulaire au niveau des requêtes via les outils de condition de requête.
Request Blocking (More Tools → Network Request Blocking) vous permet de bloquer entièrement des patterns d’URL spécifiques — utile pour tester comment votre application se comporte lorsqu’un script tiers particulier ne parvient pas à se charger.
Pour tracer l’origine d’une requête dans votre code, cliquez sur n’importe quelle requête dans l’onglet Network et ouvrez l’onglet Initiator. Il affiche la pile d’appels exacte qui a déclenché la requête — un moyen rapide de faire de la rétro-ingénierie sur des appels API inconnus ou de localiser où un fetch est déclenché de manière inattendue.
Conclusion
Les fonctionnalités ci-dessus ne sont pas obscures pour le plaisir — elles résolvent de vrais problèmes plus rapidement que les alternatives. CSS Overview remplace les audits manuels de feuilles de style. Les Logpoints remplacent les instructions console jetables. Coverage rend l’optimisation des bundles concrète plutôt que spéculative.
Les meilleures techniques de débogage Chrome DevTools partagent un trait : elles réduisent l’écart entre « quelque chose ne va pas » et « je sais exactement ce qui ne va pas ». Commencez par une fonctionnalité de cette liste, intégrez-la à votre flux de travail, et le reste suivra naturellement.
FAQ
Les Logpoints sont liés à votre session DevTools et au mapping spécifique du fichier source. Ils persistent tant que la source de la page reste la même et que DevTools conserve l'état de son workspace. Cependant, ils ne sont pas sauvegardés de manière permanente entre les redémarrages du navigateur, sauf si vous utilisez un Workspace avec des surcharges de fichiers locaux configurées dans le panneau Sources.
Le tree-shaking supprime le code qui n'est jamais importé ou référencé au moment de la compilation, sur la base d'une analyse statique. L'onglet Coverage mesure l'exécution à l'exécution, montrant le code qui a été livré au navigateur mais qui n'a jamais réellement été exécuté pendant une session. Ils se complètent : le tree-shaking détecte les exports morts, tandis que Coverage détecte le code qui est accessible mais inutilisé en pratique.
CSS Overview n'offre pas de fonction d'export intégrée. Cependant, vous pouvez copier manuellement les données de chaque section ou prendre des captures d'écran. Pour une approche plus automatisée, envisagez d'utiliser des outils comme cssstats.com ou Wallace CLI, qui analysent les feuilles de style et produisent des rapports exportables avec des ventilations similaires de couleurs, polices et spécificité.
L'activation de Layout Shift Regions via le tiroir Rendering ajoute une superposition visuelle mais ne fausse pas significativement vos métriques du panneau Performance. Le coût de rendu de la superposition est négligeable. Pour des résultats de profilage les plus précis possible, fermez les autres onglets, désactivez les extensions du navigateur et utilisez une fenêtre de navigation privée pour minimiser les interférences des processus en arrière-plan.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
