Awesome Chrome DevTools 
Awesome tooling and resources in the Chrome DevTools ecosystem
Contents
- Learning
- DevTools tooling and ecosystem
- Chrome DevTools Protocol
- Using DevTools frontend with other platforms
- Applications
- DevTools Extensions
- Alumni
Learning
- Dev Tips - Large collection of tips as animated gifs.
- DevTools Tips - Collection of illustrated tips as mini tutorials.
- Can I DevTools? - Various workflows, documented. Also a weekly tips & tricks newsletter.
- Web cheatcodes - Browser developer tools for non-developers.
- Dear Console - A collection of snippets to use in the browser console.
DevTools tooling and ecosystem
Object formatting
- immutable-devtools - Custom formatter for Immutable-js values.
Network Inspection
- betwixt - System level network proxy, providing inspection via Network panel.
- Weer - A HTTP protocol debugger (closed source)
CPU profile
- call-trace - Can instrument your JS with hooks, and then generate a
.cpuprofileof the of the complete (non-sampled) execution. View either time or call counts. - cpuprofilify - Converts output of various profiling/sampling tools to the
.cpuprofileformat. - Wishbone Python framework - Profiling data can export as
.cpuprofile.
Multimedia
- snapline - Converts timeline screenshots to gif.
Timeline, Tracing & Profiling
- DevTools Timeline Viewer - Share URLs of your timeline recordings.
Chrome Debugger integration with Editors
- VS Code - Debugger for Chrome - Breakpoint debugging in VS Code.
- VS Code - Elements for Microsoft Edge - Elements panel inside VS Code.
- ChromeREPL - Within Sublime Text, use the Chrome console.
- Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
- WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
Chrome DevTools Protocol
- ChromeDevTools/devtools-protocol - Canonical location of the protocol JSON. Issue tracker for protocol bugs. TypeScript types.
- DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.
Developing with the protocol
- chrome-remote-interface Wiki - Many useful recipes.
- Chrome Protocol Proxy - Tool for debugging clients using devtools protocol.
The big two automation libraries
- Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also awesome-puppeteer.
- Playwright - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also awesome-playwright.
Libraries for driving the protocol (or a layer above)
- JavaScript/Node.js: chrome-remote-interface
- TypeScript/Node.js: chrome-debugging-client
- TypeScript/Node.js: noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
- TypeScript/Node.js: Taiko
- Rust: Rust Headless Chrome
- Java: chrome-devtools-java-client
- Java: jvppeteer - Headless Chrome For Java
- Python: PyCDP - Pure-Python, sans-IO wrappers. See also the Trio CDP driver