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

Hervorragende Werkzeuge und Ressourcen im Chrome-DevTools-Ökosystem

Werkzeuge, Protokoll-Treiber, Trace-Viewer und eigenständige Frontends, die rund um Chrome DevTools und das Chrome DevTools Protocol (CDP) entstanden sind. Gemäß dem Awesome Manifesto halten wir diese Liste auf das wirklich Nützliche fokussiert, anstatt alles im Bereich zu indexieren.

Inhaltsverzeichnis

• Lernen
• Tracing & Profiling
• Chrome DevTools Protocol
• DevTools-Frontend mit anderen Plattformen nutzen
• DevTools-Erweiterungen
• Ehemalige Projekte

---

Lernen

• Dev Tips - Große Sammlung von Tipps als animierte Gifs.
• DevTools Tips - Sammlung illustrierter Tipps als Mini-Tutorials.
• Web cheatcodes - Browser-Entwicklerwerkzeuge für Nicht-Entwickler.
• Dear Console - Eine Sammlung von Snippets für die Browser-Konsole.
• Chrome Secret Menus - Leitfaden zu Chromes internen chrome://-Seiten und Diagnosewerkzeugen.
• Front-end Debugging Tools Handbook - Praktischer Leitfaden zum Front-End-Debugging über DevTools, Framework-Erweiterungen und IDEs hinweg.

---

Tracing & Profiling

DevTools-Performance-Traces und V8-.cpuprofile-Protokolle sind im Kern einfaches JSON, und einige eigenständige Viewer bewältigen damit Großartiges:

• trace.cafe - Web-Performance-Traces direkt im DevTools-Performance-Panel teilen und ansehen (Quelle).
• speedscope - Schneller, interaktiver Flamegraph-Viewer, der Chrome-.cpuprofile und Timeline-Traces importiert.
• cpupro - Tiefer V8/Chrome-.cpuprofile-Analysator mit Flamegraphs, Aufrufbäumen und Hotspot-Diagnose.
• Perfetto - Suite zur Systemprofilerung und Trace-Analyse (ui.perfetto.dev) mit Chromium-Trace-Unterstützung und SQL-Trace-Abfragen.

---

Chrome DevTools Protocol

Profi-Tipp: Schalten Sie Chromes eingebauten Protocol Monitor (More tools > Protocol monitor) ein, um live CDP-Verkehr zu beobachten und direkt im Browser rohe Befehle abzusetzen.

• ChromeDevTools/devtools-protocol - Kanonischer Ort des Protokoll-JSON, der TypeScript-Typen und den Issue-Tracker für Protokollfehler enthält.
• DevTools Protocol API Docs - Durchsuchbare Oberfläche zum Erkunden der Domänen, Methoden und Ereignisse des Protokolls.

Entwicklung mit dem Protokoll

• chrome-remote-interface Wiki - Praktische Rezepte für häufige Roh-CDP-Aufgaben.
• Chrome Protocol Proxy - Proxy zum Untersuchen und Debuggen von CDP-Client-Verkehr.

Die zwei großen Automatisierungsbibliotheken

• Puppeteer - High-Level-Node.js-API zur Steuerung von Chrome über CDP und WebDriver BiDi. Siehe auch awesome-puppeteer.
• Playwright - Plattformübergreifende Browser-Automatisierung für Chromium, Firefox und WebKit unter Node.js, Python, .NET und Java. Siehe auch awesome-playwright.

Bibliotheken zur Steuerung des Protokolls (oder einer Schicht darüber)

• JavaScript/Node.js: chrome-remote-interface - CDP-Client auf niedriger Ebene
• Rust: chromiumoxide - Async/tokio-Bibliothek mit generierten Typen
• Rust: Rust Headless Chrome - High-Level-Headless-Chrome-Client
• Java: chrome-devtools-java-client - Client auf Protokollebene
• Java: jvppeteer - Headless Chrome für Java
• Python: Zendriver - Async-CDP-Browser-Automatisierung
• Python: PyCDP - Sans-IO-Wrapper (siehe auch Trio driver)
• Python: ChromeController - Browser-Verwaltung auf hohem Niveau
• Go: chromedp - High-Level-Aktionen und -Aufgaben
• Go: Rod - High-Level-Automatisierung und Scraping
• Go: cdp - Typsichere Bindings für CDP
• C#/.NET: Puppeteer Sharp - Puppeteer-Portierung
• C#/.NET: dotnet-chrome-protocol - Laufzeitbibliothek und Schema-Codegenerierung
• Ruby: Ferrum - High-Level-API zur Steuerung von Chrome
• Ruby: Cuprite - Capybara-Treiber
• Kotlin: chrome-devtools-kotlin - Coroutine-basierte Client-Bibliothek
• Kotlin: kdriver - High-Level-Coroutine-Automatisierung
• Clojure: clj-chrome-devtools - Autogenerierter CDP-Wrapper
• Clojure: cuic - High-Level-UI-Testautomatisierung
• PHP: chrome-devtools-protocol - Client-Bibliothek

Agentische Browser-Automatisierung

Wir sind mit diesem Abschnitt extrem wählerisch. Gerade kapselt jeder einen Browser für Agenten ein — erwarten Sie, dass jede PR, die einen weiteren MCP-Server oder Agenten-CLI hinzufügt, geschlossen wird, es sei denn, sie hat echten Zuspruch und tut mit CDP unter der Haube etwas Neues.

• chrome-devtools-mcp - Offizieller MCP-Server für Chrome DevTools, der auch eine CLI enthält.
• Webcmd - Übersetzt Seitennavigation in deterministische, seitenweise CLI-Befehle für KI-Agenten.
• Lumen - Visuell führender Browser-Agent mit selbstheilender deterministischer Wiedergabe über CDP.
• bdg - Persistente Hintergrund-CDP-Sitzung, die DOM, Netzwerk, Konsole und rohe Protokollmethoden als Shell-Befehle bereitstellt.

Browser-Adapter

• devtools-remote-debugger - Debuggen Sie eine Webseite per Remote über einen in clientseitigem JS implementierten CDP-Agenten.
• Inspect - Nutzen Sie DevTools für iOS- und Android-Browser sowie WebViews. (Closed Source)

DevTools-Frontend mit anderen Plattformen nutzen

Die DevTools-UI ist eine Web-App, die über ein WebSocket CDP spricht, daher können Sie sie einbetten oder auf Node, Ruby, mobile Webviews oder eigene Runtimes richten (eingebaute Ziele siehe chrome://inspect).

• ChromeDevTools/devtools-frontend - Kanonisches Quell-Repository für die Chrome-DevTools-UI (auf npm als chrome-devtools-frontend veröffentlicht).
• Chii und Eruda - Remote-Debugging-Server, der die echte devtools-frontend-UI (Chii, ein moderner Weinre-Ersatz) und die mobile DevTools-Konsole in der Seite (Eruda) nutzt.
• vscode-js-debug - Offizieller, DAP-konformer JavaScript- und Chrome-CDP-Debugger, der VS Code antreibt.
• VS Code - Elements for Microsoft Edge - Elements- und Network-Panels eingebettet in VS Code.
• Debugging Node.js with Chrome DevTools - Leitfaden zum Debuggen und Profilen von Node.js mit node --inspect.
• ruby/debug - Rubys offizieller Debugger, der die Verbindung zu Chrome DevTools über CDP unterstützt (rdbg --open=chrome).

---

DevTools-Erweiterungen

• React Developer Tools - Untersuchen Sie React-Komponentenhierarchien, Props und Profiler-Flamegraphs.
• Vue.js Developer Tools - Untersuchen Sie Vue.js-Komponenten, -Zustand und -Routing.
• Angular DevTools - Komponentenbaum-Inspektion und Change-Detection-Profiling für Angular.
• Redux Devtools - Time-Travel-Debugging und Aktionsverlauf für Redux.
• Ember.js Inspector - Untersuchen Sie Ember.js-Objekte, -Routen und -Daten.
• Web Component DevTools - Untersuchen, ändern und beobachten Sie benutzerdefinierte Elemente und Shadow DOM auf der Seite.
• Clockwork - PHP-Anwendungsprofilierung und Anfrage-Inspektion in DevTools.
• RailsPanel - Ruby-on-Rails-Anfragen- und SQL-Profilierungspanel.

Ehemalige Projekte

Alte Projekte, vermutlich nicht mehr gepflegt … Aber immer noch cool.

• ndb - Verbesserte Node.js-Debugging-Erfahrung auf Basis des DevTools-Frontends.
• thetool - CPU-, Speicher-, Coverage- und Typenprofilierung für Node.js.
• Facebook Stetho - Nativ-Android-Debugging mit Chrome DevTools.
• PonyDebugger - Remote-Netzwerk- und Core-Data-Debugging für iOS-Apps über Chrome DevTools.
• betwixt - Systemweiter Netzwerk-Proxy, der über ein eigenständiges DevTools-Network-Panel inspiziert wird.
• Dirac - ClojureScript-Debugging mit einem angepassten DevTools-Fork.
• VS Code - Debugger for Chrome - Ursprünglicher Chrome-Debugger für VS Code (abgelöst vom eingebauten vscode-js-debug, das eine umfangreiche CDP/DAP-Implementierung besitzt).
• noice-json-rpc - Proxy-basierte TypeScript/JS-Bibliothek, die CDP-Domänen direkt als API bereitstellt.
• PuPHPeteer - PHP-Brücke zu Node Puppeteer.
• Insight - WebGL-Debugging-Toolkit für Chrome DevTools.
• Remote Debug Gateway - Verbinden Sie einen Debugging-Client gleichzeitig mit mehreren Browsern.
  • Multiuser DevTools: DevTools Remote - Debuggen Sie den Browser einer anderen Person per Remote.
• DevTools Backend - Eigenständige Implementierung des Chrome-DevTools-Backends zum Debuggen beliebiger Web-Umgebungen.
• Python-CDP-Treiber: pychrome - Low-Level-CDP-Transport-Handler.
• ios-webkit-debug-proxy - Stellt Mobile-Safari- und UIWebView-Instanzen über CDP bereit.
  • Remote Debug iOS WebKit adapter - Baut auf ios-webkit-debug-proxy auf und übersetzt WebKits Remote-Debugging-Protokoll in CDP.
• IE Diagnostics Adapter - Protokoll-Adapter, der IE 11 in CDP übersetzt.