Chrome DevTools

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

Awesome Chrome DevTools

Awesome tooling and resources in the Chrome DevTools ecosystem

Tools, protocol drivers, trace viewers, and standalone frontends built around Chrome DevTools and the Chrome DevTools Protocol (CDP). Following the Awesome Manifesto, we keep this list focused on what’s genuinely useful rather than indexing everything in the space.

Contents

• Learning
• Tracing & Profiling
• Chrome DevTools Protocol
• Using DevTools frontend with other platforms
• DevTools Extensions
• Alumni

---

Learning

• Dev Tips - Large collection of tips as animated gifs.
• DevTools Tips - Collection of illustrated tips as mini tutorials.
• Web cheatcodes - Browser developer tools for non-developers.
• Dear Console - A collection of snippets to use in the browser console.
• Chrome Secret Menus - Guide to Chrome’s internal chrome:// pages and diagnostic tools.
• Front-end Debugging Tools Handbook - Practical guide to front-end debugging across DevTools, framework extensions, and IDEs.

---

Tracing & Profiling

DevTools Performance traces and V8 .cpuprofile logs are plain JSON under the hood, and a few standalone viewers do great things with them:

• trace.cafe - Share and view web performance traces directly in the DevTools Performance panel (source).
• speedscope - Fast, interactive flamegraph viewer that imports Chrome .cpuprofile and timeline traces.
• cpupro - Deep V8/Chrome .cpuprofile analyzer with flamegraphs, call trees, and hot-spot diagnostics.
• Perfetto - System profiling and trace analysis suite (ui.perfetto.dev) with Chromium trace support and SQL trace querying.

---

Chrome DevTools Protocol

Pro-tip: flip on Chrome’s built-in Protocol Monitor (More tools > Protocol monitor) to watch live CDP traffic and fire off raw commands right in the browser.

• ChromeDevTools/devtools-protocol - Canonical location of the protocol JSON, TypeScript types, and issue tracker for protocol bugs.
• DevTools Protocol API Docs - Browsable UI for exploring the protocol’s domains, methods, and events.

Developing with the protocol

• chrome-remote-interface Wiki - Handy recipes for common raw-CDP tasks.
• Chrome Protocol Proxy - Proxy for inspecting and debugging CDP client traffic.

The big two automation libraries

• Puppeteer - High-level Node.js API for controlling Chrome over CDP and WebDriver BiDi. See also awesome-puppeteer.
• Playwright - Cross-browser automation for Chromium, Firefox, and WebKit across Node.js, Python, .NET, and Java. See also awesome-playwright.

Libraries for driving the protocol (or a layer above)

• JavaScript/Node.js: chrome-remote-interface - Low-level CDP client
• Rust: chromiumoxide - Async/tokio library with generated types
• Rust: Rust Headless Chrome - High-level headless Chrome client
• Java: chrome-devtools-java-client - Low-level protocol client
• Java: jvppeteer - Headless Chrome for Java
• Python: Zendriver - Async CDP browser automation
• Python: PyCDP - Sans-IO wrappers (see also Trio driver)
• Python: ChromeController - High-level browser mgmt
• Go: chromedp - High-level actions and tasks
• Go: Rod - High-level automation and scraping
• Go: cdp - Type-safe bindings for CDP
• C#/.NET: Puppeteer Sharp - Puppeteer port
• C#/.NET: dotnet-chrome-protocol - Runtime library and schema codegen
• Ruby: Ferrum - High-level API to control Chrome
• Ruby: Cuprite - Capybara driver
• Kotlin: chrome-devtools-kotlin - Coroutine-based client library
• Kotlin: kdriver - High-level coroutine-based automation
• Clojure: clj-chrome-devtools - Autogenerated CDP wrapper
• Clojure: cuic - High-level UI test automation
• PHP: chrome-devtools-protocol - Client library

Agentic Browser Automation

We’re extremely picky with this section. Everyone is wrapping a browser for agents right now—expect any PR adding another MCP server or agent CLI to be closed unless it has real traction and does something novel with CDP under the hood.

• chrome-devtools-mcp - Official MCP server for Chrome DevTools, which also includes a CLI.
• Webcmd - Compiles site navigation into deterministic per-site CLI commands for AI agents.
• Lumen - Vision-first browser agent with self-healing deterministic replay over CDP.
• bdg - Persistent background CDP session exposing DOM, network, console, and raw protocol methods as shell commands.

Browser Adapters

• devtools-remote-debugger - Debug a webpage remotely via a CDP agent implemented in client-side JS.
• Inspect - Use DevTools against iOS and Android browsers and WebViews. (closed source)

Using DevTools frontend with other platforms

The DevTools UI is a web app speaking CDP over a WebSocket, so you can embed it or point it at Node, Ruby, mobile webviews, or custom runtimes (see chrome://inspect for built-in targets).

• ChromeDevTools/devtools-frontend - Canonical source repo for the Chrome DevTools UI (published to npm as chrome-devtools-frontend).
• Chii & Eruda - Remote debugging server using the real devtools-frontend UI (Chii, a modern Weinre replacement) and in-page mobile DevTools console (Eruda).
• vscode-js-debug - Official DAP-compliant JavaScript and Chrome CDP debugger powering VS Code.
• VS Code - Elements for Microsoft Edge - Elements and Network panels embedded inside VS Code.
• Debugging Node.js with Chrome DevTools - Guide on debugging and profiling Node.js with node --inspect.
• ruby/debug - Ruby’s official debugger, which supports connecting Chrome DevTools over CDP (rdbg --open=chrome).

---

DevTools Extensions

• React Developer Tools - Inspect React component hierarchies, props, and profiler flamegraphs.
• Vue.js Developer Tools - Inspect Vue.js components, state, and routing.
• Angular DevTools - Component tree inspection and change-detection profiling for Angular.
• Redux Devtools - Time-travel debugging and action history for Redux.
• Ember.js Inspector - Inspect Ember.js objects, routes, and data.
• Web Component DevTools - Inspect, modify, and observe custom elements and shadow DOM on the page.
• Clockwork - PHP application profiling and request inspection in DevTools.
• RailsPanel - Ruby on Rails request and SQL profiling panel.

Alumni

Old projects, likely not maintained any longer… But still cool.

• ndb - Improved Node.js debugging experience built on the DevTools frontend.
• thetool - CPU, memory, coverage, and type profiling for Node.js.
• Facebook Stetho - Native Android debugging with Chrome DevTools.
• PonyDebugger - Remote network and Core Data debugging for iOS apps via Chrome DevTools.
• betwixt - System-level network proxy inspected through a standalone DevTools Network panel.
• Dirac - ClojureScript debugging with a custom DevTools fork.
• VS Code - Debugger for Chrome - Original Chrome debugger for VS Code (superseded by built-in vscode-js-debug, which has a rich CDP/DAP implementation).
• noice-json-rpc - Proxy-based TypeScript/JS library exposing CDP domains directly as an API.
• PuPHPeteer - PHP bridge to Node Puppeteer.
• Insight - WebGL debugging toolkit for Chrome DevTools.
• Remote Debug Gateway - Connect a debugging client to multiple browsers at once.
  • Multiuser DevTools: DevTools Remote - Remotely debug someone else’s browser.
• DevTools Backend - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
• Python CDP driver: pychrome - Low-level CDP transport handler.
• ios-webkit-debug-proxy - Exposes Mobile Safari & UIWebView instances via CDP.
  • Remote Debug iOS WebKit adapter - Builds on ios-webkit-debug-proxy and translates WebKit’s Remote Debugging Protocol to CDP.
• IE Diagnostics Adapter - Protocol adapter translating IE 11 to CDP.