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

readme.md

Awesome chrome-devtools Awesome

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents

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

  • 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

  • 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 using the Chrome DevTools Protocol in Go
  • 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.
  • PHP: chrome-devtools-protocol - A PHP client library for the protocol.

Developing with the protocol

Browser Adapters

Using DevTools frontend with other 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


License

CC0

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