Chrome DevTools

Awesome Chrome DevTools Awesome

Awesome tooling and resources in the Chrome DevTools ecosystem


Learning

Multiuser DevTools


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

Automation

  • Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol.
  • Python port: pyppeteer
  • Rust port: Rust Headless Chrome
  • .NET port: Puppeteer Sharp
  • headless-devtools - Puppeteer plugin to get CSS Coverage or JS Heap snapshot.
  • Taiko - A Node.js module to automate the chrome/chromium using DevTools protocol.
  • Also all Protocol Driver Libraries below

Protocol Driver Libraries

Browser Adapters

Using DevTools frontend with other platforms

Android

ClojureScript

  • 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

Themes

Performance

  • Chrome React Perf - An Operation Interface for react-addons-perf Package.
  • 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.

License

CC0

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