Awesome tooling and resources in the Chrome DevTools ecosystem
Contents
Learning
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.
- snapline -
Converts timeline screenshots to gif.
Timeline, Tracing &
Profiling
Chrome Debugger
integration with Editors
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)
Android
ClojureScript
- Dirac - Debugging
of ClojsureScript.
iOS
- PonyDebugger -
Remote network and data debugging iOS apps with Chrome DevTools.
Node.js
Ruby
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
- Clockwork
- View PHP application profiling data.
- Emulated
Device Lab - Experiment with multiple devices being emulated at the
same time.
- RailsPanel
- View Ruby on Rails application profiling data.
- React
Developer Tools - Inspect the React component hierarchies.
- EmberJS
Inspector - Allows you to inspect EmberJS objects in your
application.
- VueJS Developer
Tools - Inspect VueJS components and manipulate their data.
- Angular
Batarang - Inspect an Angular application’s scope and profile its
data.
- Augury - Debugging and
Profiling for Angular 2 applications.
- Marionette
Inspector - Inspect a Marionette application’s views, events, and
live data.
- Backbone
Debugger - Inspect a Backbone application’s views, models, events,
and routes.
- App
Inspector for Sencha - Inspect a Sencha ExtJS/Touch application’s
component tree, data stores, events, and layouts.
- Redux
Devtools - Inspect Redux with actions history, undo and replay.
- Three.js
- Edit any three.js project.
- Insight - A
WebGL debugging toolkit which enables more productive WebGL development
and more efficient WebGL applications.
- BEM
devtools - Inspect BEM entities expressed in
i-bem
framework.
- Metal.js
Developer Tools - Inspect the Metal component hierarchies.
- Web
Component DevTools - Inspect, modify and observe Web Components on
page.
Themes
- 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.
chromedevtools.md
Github
