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

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