Awesome Chrome DevTools – Massive Collection of Resources

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