List.community

Awesome chrome-devtools Awesome

Awesome tooling and resources in the Chrome DevTools ecosystem

Learning

  • Dev Tips - Large collection of tips as animated gifs.

DevTools as an IDE

DevTools tooling and ecosystem

Object formatting

Network Inspection

  • betwixt4k 104 - System level network proxy, providing inspection via Network panel

CPU profile

  • JSCLegacyProfiler/json2trace69k 18k - Converts Safari's JavaScriptCore profiler output into .cpuprofile
  • call-trace13 2 - 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.
  • cpuprofilify108 11 - Converts output of various profiling/sampling tools to the .cpuprofile format.
  • Wishbone python framework - Profiling data can export as .cpuprofile.

Multimedia

  • snapline279 7 - Converts timeline screenshots to gif.

Timeline, Tracing & Profiling

Chrome Debugger integration with Editors

Chrome DevTools Protocol

  • DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events
  • ChromeDevTools/devtools-protocol - Issue tracker for protocol bugs
  • Remote Debug Gateway46 1 - 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.
  • Chrome Protocol Proxy30 2 - tool for debugging clients using devtools protocol
  • Puppeteer23k 1k - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol

Protocol driver libraries (in various languages)

  • JavaScript/Node.js: chrome-remote-interface3k 184 - The most-used JavaScript API for the protocol
  • TypeScript/Node.js: chrome-debugging-client9 5 - A TypeScript async/await-friendly debugging client
  • Java: cdp4j27 10 - Java library for CDP
  • Python: PyChromeDevTools - Python wrapper for Google Chrome Dev Protocol
  • Python: chromewhip - Python 3 asyncio driver to manage concurrent requests to Google Chrome Devtools endpoints
  • Python: pychrome72 9 - A Python Package for the Google Chrome Dev Protocol
  • Go: chromedp1k 39 - High level actions and tasks for driving browsers via the Chrome Debugging Protocol
  • Go: cdp58 10 - A Golang library for the protocol
  • Go: gcd94 22 - A different client library in Go
  • Go: godet106 5 - Also different, also Go.
  • C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
  • Ruby: ChromeRemote - A client implementation of the Chrome DevTools Protocol in Ruby
  • Kotlin: chrome-reactive-kotlin6 4 - reactive (rxjava 2.x), low-level client library in Kotlin
  • Clojure: clj-chrome-devtools - A Clojure library for the protocol. The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.

Developing with the protocol

Browser Adapters

Using DevTools frontend with other targets/platforms

Android
ClosureScript
  • Dirac477 22 - Debugging of ClojsureScript
Lua
  • Mare205 37 - Lua debugging with Chrome DevTools

iOS

  • PonyDebugger6k 648 - Remote network and data debugging iOS apps with Chrome DevTools
Go
Node.js

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 Tools6k 783 - 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.
  • Insight703 22 - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
  • BEM devtools36 4 - Inspect BEM entities expressed in i-bem framework.
  • Metal.js Developer Tools - Inspect the Metal component hierarchies.

UX

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

Performance

Testing