Awesome Chrome DevTools

Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
Under Creative Commons Zero v1.0 Universal
By ChromeDevTools

awesome-list awesome

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents

Learning

DevTools tooling and ecosystem

Chrome DevTools Protocol

Using DevTools frontend with other platforms

DevTools Extensions

Learning

Dev Tips - Large collection of tips as animated gifs.

DevTools Snippets - Collection of snippets.

Multiuser DevTools

DevTools Remote - Remotely debug someone else's browser.

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.

Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.

DevTools Backend - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.

RemoteDebug - Initiative to normalize debugging protocols across today's browsers.

ChromeDriver - The official Selenium/WebDriver implementation for Chrome is implemented on top of the DevTools Protocol.

BrowserGap Community Edition - A remote browser product, open sourced. Makes heavy use of the raw, tip-of-tree Chrome DevTools protocol.

Automation

Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol.

Python port: pyppeteer

Rust port: Rust Headless Chrome

.NET port: Puppeteer Sharp

Ruby port: Ferrum

headless-devtools - Puppeteer plugin to get CSS Coverage or JS Heap snapshot.

PuPHPeteer - PHP-bridge to control Puppeteer using PHP.

Playwright - Node.js library to automate Chromium, Firefox and WebKit with a single API.

Taiko - A Node.js module to automate the Chrome/Chromium using DevTools protocol.

cuic - Clojure library providing a high-level API for UI test automation over the DevTools Protocol.

Also all Protocol Driver Libraries below

Protocol Driver Libraries

JavaScript/Node.js: chrome-remote-interface - The most-used JavaScript API for the protocol

TypeScript/Node.js: chrome-debugging-client

Java: chrome-devtools-java-client

Java: karate - Web-service testing framework with a Java API to automate Chrome

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: pychrome - low level CDP transport handler

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#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.

Ruby: Cuprite - Capybara driver

Ruby: ChromeRemote

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.

PHP: chrome-devtools-protocol - A PHP client library for the protocol.

Browser Adapters

Remote Debug Firefox adapter - Translates Firefox's devtools protocol to the CDP.

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.

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.

Lua

Mare - Lua debugging with Chrome DevTools.

iOS

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

go-debugger-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.

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.

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.