Skip to content

ChromeDevTools/awesome-chrome-devtools

Repository files navigation

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

  • devtools-remote-debugger - Use devtools against a webpage; a CDP agent implemeted in client-side JS.
  • 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.
  • k6 browser - Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.

Alumni

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

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published