/awesome-chrome-devtools

Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem

Creative Commons Zero v1.0 UniversalCC0-1.0

Awesome Chrome DevTools Awesome

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents


Learning


DevTools tooling and ecosystem

Object formatting

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

Chrome Debugger integration with Editors


Chrome DevTools Protocol

Developing with the protocol

The big two automation libraries

  • Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also awesome-puppeteer.
  • Playwright - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also awesome-playwright.

Libraries for driving the protocol (or a layer above)

Browser Adapters

  • Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)

Using DevTools frontend with other platforms

Android

ClojureScript

  • Dirac - Debugging of ClojsureScript.

iOS

  • PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.

Node.js

Ruby


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

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.

Automation

  • Puppeteer IDE - Standalone Puppeteer playground in browser's developer tools.

Alumni

Old projects, likely not maintained any longer… But still cool.