Chrome DevTools

Source: https://github.com/ChromeDevTools/awesome-chrome-devtools at 83087609da17
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

Awesome Chrome DevTools

Outils et ressources exceptionnels dans l’écosystème Chrome DevTools

Outils, pilotes de protocole, visualiseurs de traces et interfaces autonomes construits autour de Chrome DevTools et du Chrome DevTools Protocol (CDP). Conformément au Awesome Manifesto, nous gardons cette liste axée sur ce qui est réellement utile plutôt que d’indexer tout ce qui existe dans le domaine.

Sommaire

• Apprentissage
• Tracing et profilage
• Chrome DevTools Protocol
• Utiliser le frontend DevTools avec d’autres plateformes
• Extensions DevTools
• Anciens projets

---

Apprentissage

• Dev Tips - Grande collection d’astuces sous forme de gifs animés.
• DevTools Tips - Collection d’astuces illustrées sous forme de mini-tutoriels.
• Web cheatcodes - Outils de développement navigateur pour les non-développeurs.
• Dear Console - Une collection de snippets à utiliser dans la console du navigateur.
• Chrome Secret Menus - Guide des pages internes chrome:// de Chrome et des outils de diagnostic.
• Front-end Debugging Tools Handbook - Guide pratique du débogage front-end à travers DevTools, les extensions de frameworks et les IDE.

---

Tracing et profilage

Les traces DevTools Performance et les journaux V8 .cpuprofile sont en réalité de simples JSON, et quelques visualiseurs autonomes font des merveilles avec eux :

• trace.cafe - Partagez et visualisez des traces de performance web directement dans le panneau Performance de DevTools (source).
• speedscope - Visualiseur de flamegraphs rapide et interactif qui importe les .cpuprofile et les traces chronologiques de Chrome.
• cpupro - Analyseur V8/Chrome .cpuprofile approfondi avec flamegraphs, arbres d’appels et diagnostics des points chauds.
• Perfetto - Suite de profilage système et d’analyse de traces (ui.perfetto.dev) avec prise en charge des traces Chromium et interrogation SQL des traces.

---

Chrome DevTools Protocol

Astuce pro : activez le Protocol Monitor intégré de Chrome (More tools > Protocol monitor) pour observer le trafic CDP en direct et envoyer des commandes brutes directement dans le navigateur.

• ChromeDevTools/devtools-protocol - Emplacement canonique du JSON du protocole, des types TypeScript et le suivi des bogues du protocole.
• DevTools Protocol API Docs - Interface navigable pour explorer les domaines, méthodes et événements du protocole.

Développer avec le protocole

• chrome-remote-interface Wiki - Recettes pratiques pour les tâches CDP brutes courantes.
• Chrome Protocol Proxy - Proxy pour inspecter et déboguer le trafic client CDP.

Les deux grandes bibliothèques d’automatisation

• Puppeteer - API Node.js de haut niveau pour contrôler Chrome via CDP et WebDriver BiDi. Voir aussi awesome-puppeteer.
• Playwright - Automatisation multi-navigateurs pour Chromium, Firefox et WebKit sur Node.js, Python, .NET et Java. Voir aussi awesome-playwright.

Bibliothèques pour piloter le protocole (ou une couche au-dessus)

• JavaScript/Node.js : chrome-remote-interface - Client CDP bas niveau
• Rust : chromiumoxide - Bibliothèque async/tokio avec types générés
• Rust : Rust Headless Chrome - Client Chrome headless de haut niveau
• Java : chrome-devtools-java-client - Client de protocole bas niveau
• Java : jvppeteer - Chrome headless pour Java
• Python : Zendriver - Automatisation navigateur CDP asynchrone
• Python : PyCDP - Wrappers sans E/S (voir aussi Trio driver)
• Python : ChromeController - Gestion de navigateur de haut niveau
• Go : chromedp - Actions et tâches de haut niveau
• Go : Rod - Automatisation et scraping de haut niveau
• Go : cdp - Liaisons CDP sûres au niveau du type
• C#/.NET : Puppeteer Sharp - Portage de Puppeteer
• C#/.NET : dotnet-chrome-protocol - Bibliothèque d’exécution et génération de code de schéma
• Ruby : Ferrum - API de haut niveau pour contrôler Chrome
• Ruby : Cuprite - Pilote Capybara
• Kotlin : chrome-devtools-kotlin - Bibliothèque cliente basée sur les coroutines
• Kotlin : kdriver - Automatisation de haut niveau basée sur les coroutines
• Clojure : clj-chrome-devtools - Wrapper CDP autogénéré
• Clojure : cuic - Automatisation de tests UI de haut niveau
• PHP : chrome-devtools-protocol - Bibliothèque cliente

Automatisation de navigateur agentique

Nous sommes extrêmement exigeants sur cette section. Tout le monde encapsule un navigateur pour les agents en ce moment — attendez-vous à ce que toute PR ajoutant un autre serveur MCP ou un CLI agent soit fermée, sauf s’il a une véritable traction et fait quelque chose de nouveau avec CDP sous le capot.

• chrome-devtools-mcp - Serveur MCP officiel pour Chrome DevTools, qui inclut également un CLI.
• Webcmd - Compile la navigation sur un site en commandes CLI déterministes par site pour les agents IA.
• Lumen - Agent navigateur axé sur la vision avec relecture déterministe auto-réparatrice via CDP.
• bdg - Session CDP d’arrière-plan persistante exposant le DOM, le réseau, la console et les méthodes de protocole brut comme commandes shell.

Adaptateurs de navigateur

• devtools-remote-debugger - Déboguez une page web à distance via un agent CDP implémenté en JS côté client.
• Inspect - Utilisez DevTools sur les navigateurs et WebViews iOS et Android. (code fermé)

Utiliser le frontend DevTools avec d’autres plateformes

L’interface DevTools est une application web parlant CDP via un WebSocket, vous pouvez donc l’intégrer ou la pointer vers Node, Ruby, les webviews mobiles ou des runtimes personnalisés (voir chrome://inspect pour les cibles intégrées).

• ChromeDevTools/devtools-frontend - Dépôt source canonique de l’interface Chrome DevTools (publié sur npm sous chrome-devtools-frontend).
• Chii et Eruda - Serveur de débogage distant utilisant la vraie interface devtools-frontend (Chii, un remplaçant moderne de Weinre) et la console DevTools mobile dans la page (Eruda).
• vscode-js-debug - Débogueur JavaScript et Chrome CDP officiel compatible DAP alimentant VS Code.
• VS Code - Elements for Microsoft Edge - Panneaux Elements et Network intégrés dans VS Code.
• Debugging Node.js with Chrome DevTools - Guide sur le débogage et le profilage de Node.js avec node --inspect.
• ruby/debug - Débogueur officiel de Ruby, qui prend en charge la connexion à Chrome DevTools via CDP (rdbg --open=chrome).

---

Extensions DevTools

• React Developer Tools - Inspectez les hiérarchies de composants React, les props et les flamegraphs du profileur.
• Vue.js Developer Tools - Inspectez les composants, l’état et le routage Vue.js.
• Angular DevTools - Inspection de l’arbre de composants et profilage de la détection de changements pour Angular.
• Redux Devtools - Débogage par voyage dans le temps et historique des actions pour Redux.
• Ember.js Inspector - Inspectez les objets, routes et données Ember.js.
• Web Component DevTools - Inspectez, modifiez et observez les éléments personnalisés et le shadow DOM de la page.
• Clockwork - Profilage d’applications PHP et inspection des requêtes dans DevTools.
• RailsPanel - Panneau de profilage des requêtes et SQL Ruby on Rails.

Anciens projets

Anciens projets, probablement plus maintenus… Mais toujours cool.

• ndb - Expérience de débogage Node.js améliorée basée sur le frontend DevTools.
• thetool - Profilage CPU, mémoire, couverture et types pour Node.js.
• Facebook Stetho - Débogage Android natif avec Chrome DevTools.
• PonyDebugger - Débogage réseau et Core Data à distance pour les apps iOS via Chrome DevTools.
• betwixt - Proxy réseau au niveau système inspecté via un panneau Network DevTools autonome.
• Dirac - Débogage ClojureScript avec un fork DevTools personnalisé.
• VS Code - Debugger for Chrome - Débogueur Chrome original pour VS Code (remplacé par le vscode-js-debug intégré, qui possède une riche implémentation CDP/DAP).
• noice-json-rpc - Bibliothèque TypeScript/JS basée sur un proxy exposant les domaines CDP directement comme une API.
• PuPHPeteer - Pont PHP vers Node Puppeteer.
• Insight - Boîte à outils de débogage WebGL pour Chrome DevTools.
• Remote Debug Gateway - Connectez un client de débogage à plusieurs navigateurs à la fois.
  • DevTools multiutilisateur : DevTools Remote - Déboguez à distance le navigateur de quelqu’un d’autre.
• DevTools Backend - Implémentation autonome du backend Chrome DevTools pour déboguer n’importe quel environnement web.
• Pilote Python CDP : pychrome - Gestionnaire de transport CDP bas niveau.
• ios-webkit-debug-proxy - Expose les instances Mobile Safari et UIWebView via CDP.
  • Remote Debug iOS WebKit adapter - S’appuie sur ios-webkit-debug-proxy et traduit le protocole de débogage distant de WebKit en CDP.
• IE Diagnostics Adapter - Adaptateur de protocole traduisant IE 11 en CDP.