Awesome

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
• 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
  • 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.
• Rod - A Devtools driver for web automation and scraping.
• Taiko - A Node.js module to automate the Chrome/Chromium using 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
• 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
• 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

• 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.

License

This awesome list is licensed into the Public Domain under Creative Commons 0. For more information please see the license file.