Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
Switch branches/tags
Nothing to show

readme.md

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

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

CPU profile

  • JSCLegacyProfiler/json2trace - Converts Safari's JavaScriptCore profiler output into .cpuprofile
  • 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

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 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.
  • Chrome Protocol Proxy - tool for debugging clients using devtools protocol
  • Puppeteer - 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-interface - The most-used JavaScript API for the protocol
  • TypeScript/Node.js: chrome-debugging-client - A TypeScript async/await-friendly debugging client
  • Java: cdp4j - 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: pychrome - A Python Package for the Google Chrome Dev Protocol
  • Go: chromedp - High level actions and tasks for driving browsers via the Chrome Debugging Protocol
  • Go: cdp - A Golang library for the protocol
  • Go: gcd - A different client library in Go
  • Go: godet - 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-kotlin - 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
  • Dirac - Debugging of ClojsureScript
Lua
  • Mare - Lua debugging with Chrome DevTools

iOS

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

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