Awesome Chrome DevTools

Awesome tooling and resources in the Chrome DevTools ecosystem

Learning
DevTools tooling and ecosystem
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.
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 .cpuprofile of the of the complete (non-sampled) execution. View either time or call counts.
cpuprofilify - Converts output of various profiling/sampling tools to the .cpuprofile format.
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
Python: chromewhip - drop-in replacement for the splash service
Python: pyppeteer - puppeteer port
Python: ChromeController - high-level browser mgmt
Go: chromedp - High-level actions and tasks for driving browsers
Go: cdp
Go: gcd
Go: godet
Go: Rod
C#/.NET: Puppeteer Sharp - puppeteer port
C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
Ruby: Ferrum - high-level API to control Chrome in Ruby
Ruby: Cuprite - Capybara driver
Kotlin: chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
Kotlin: chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
Clojure: clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
Clojure: cuic - Providing a high-level API for UI test automation over the DevTools Protocol.
PHP: chrome-devtools-protocol - A PHP client library for the protocol.
PHP: PuPHPeteer - php bridge to node puppeteer

Browser Adapters

devtools-remote-debugger - Use devtools against a webpage; a CDP agent implemeted in client-side JS.
Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)

Using DevTools frontend with other platforms

Android

Facebook Stetho - Native Android debugging with Chrome DevTools.
j2v8-debugger - Debugging JavaScript running in J2V8 with Chrome DevTools.

ClojureScript

Dirac - Debugging of ClojsureScript.

iOS

PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.

Node.js

ndb - An improved Node.js debugging experience with the DevTools Frontend.
Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
thetool - CPU, memory, coverage, type profiling with Node.
chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.

Ruby

ruby/debug - Debugging functionality for Ruby.

DevTools Extensions

Accessibility (A11y)

Chromelens - See how your web app will look to people with different types of vision and the path users will travel when tabbing through your page.

Workflow

Clockwork - View PHP application profiling data.
Emulated Device Lab - Experiment with multiple devices being emulated at the same time.
RailsPanel - View Ruby on Rails application profiling data.
React Developer Tools - Inspect the React component hierarchies.
EmberJS Inspector - Allows you to inspect EmberJS objects in your application.
VueJS Developer Tools - Inspect VueJS components and manipulate their data.
Angular Batarang - Inspect an Angular application's scope and profile its data.
Augury - Debugging and Profiling for Angular 2 applications.
Marionette Inspector - Inspect a Marionette application's views, events, and live data.
Backbone Debugger - Inspect a Backbone application's views, models, events, and routes.
App Inspector for Sencha - Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts.
Redux Devtools - Inspect Redux with actions history, undo and replay.
Three.js - Edit any three.js project.
Insight - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
BEM devtools - Inspect BEM entities expressed in i-bem framework.
Metal.js Developer Tools - Inspect the Metal component hierarchies.
Web Component DevTools - Inspect, modify and observe Web Components on page.

Themes

DevTools Author - A selection of themes to modify parts of DevTools related to authoring web applications.
Zero Dark Matrix - Dark theme for Chrome Developer Tools.
Material UI Theme - Provides various Material Design inspired themes.

Performance

sloth - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
TracerBench - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Automation

Puppeteer IDE - Standalone Puppeteer playground in browser's developer tools.
k6 browser - Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.

Alumni

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

Remote Debug Gateway - Allows you to connect a 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 the CDP.
- Remote Debug iOS WebKit adapter - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
IE Diagnostics Adapter - Protocol adaptor for Microsoft IE 11 to CDP.