awesome-chrome-devtools
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
https://github.com/ChromeDevTools/awesome-chrome-devtools
Last synced: 1 day ago
JSON representation
-
Alumni
-
Automation
- Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.
- DevTools Remote - Remotely debug someone else's browser.
- DevTools Backend - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
- pychrome - low level CDP transport handler
- ios-webkit-debug-proxy - Exposes Mobile Safari & UIWebView instances via the CDP.
- Remote Debug iOS WebKit adapter - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
- IE Diagnostics Adapter - Protocol adaptor for Microsoft IE 11 to CDP.
- go-debugger-devtools
-
-
Applications
-
Browsers
- BrowserBox - Embed Chrome in a web page, largely powered by DevTools and supporting multiuser browsing, remote DevTools, audio, and documents like `.docx`, `.pdf`, and more.
-
Web Archivers and Indexers
- dn - Archive and index pages you browse for offline viewing and search, implemented using the `Fetch` domain's interceptions, and works with any Chromium-based browser.
-
-
Chrome DevTools Protocol
-
Browser Adapters
- Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. **(closed source)**
- devtools-remote-debugger - Use devtools against a webpage; a CDP agent implemeted in client-side JS.
-
Chrome Debugger integration with Editors
- ChromeDevTools/devtools-protocol - **Canonical location of the protocol JSON**. Issue tracker for protocol bugs. TypeScript types.
- DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.
-
Developing with the protocol
- chrome-remote-interface Wiki - Many useful recipes.
- Chrome Protocol Proxy - Tool for debugging clients using devtools protocol.
-
Libraries for driving the protocol (or a layer above)
- noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
- chrome-remote-interface
- chrome-debugging-client
- Rust Headless Chrome
- chrome-devtools-java-client
- jvppeteer - Headless Chrome For Java
- PyCDP - Pure-Python, sans-IO wrappers. See also the [Trio CDP driver](https://github.com/hyperiongray/trio-chrome-devtools-protocol)
- pyppeteer - Puppeteer port
- ChromeController - high-level browser mgmt
- chromedp - High-level actions and tasks for driving browsers
- cdp
- gcd
- godet
- Rod
- Puppeteer Sharp - Puppeteer port
- chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
- Cuprite - Capybara driver
- chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
- chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
- clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
- cuic - Providing a high-level API for UI test automation over the DevTools Protocol.
- chrome-devtools-protocol - A PHP client library for the protocol.
- PuPHPeteer - PHP bridge to node Puppeteer
- dotnet-chrome-protocol - A runtime library and schema code generation tools for Chrome DevTools Protocol support in C#/.NET.
- Rust Headless Chrome
- Lumen - Vision-first browser agent with self-healing deterministic replay over CDP.
-
The big two automation libraries
- Playwright - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also [awesome-playwright](https://github.com/mxschmitt/awesome-playwright).
-
-
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.
- 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.
-
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.
-
Performance
- sloth - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
- TracerBench - A controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
-
Themes
- 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.
- Material UI Theme - Provides various Material Design inspired themes.
- DevTools Author - A selection of themes to modify parts of DevTools related to authoring web applications.
- Material UI Theme - Provides various Material Design inspired themes.
-
Workflow
- Clockwork - View PHP application profiling data.
- Emulated Device Lab - Experiment with multiple devices being emulated at the same time.
- React Developer Tools - Inspect the React component hierarchies.
- Ember.js Inspector - Allows you to inspect Ember.js objects in your application.
- 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.
- Metal.js Developer Tools - Inspect the Metal component hierarchies.
- Web Component DevTools - Inspect, modify and observe Web Components on page.
- RailsPanel - View Ruby on Rails application profiling data.
- Augury - Debugging and Profiling for Angular 2 applications.
- BEM devtools - Inspect BEM entities expressed in `i-bem` framework.
- Vue.js Developer Tools - Inspect Vue.js components and manipulate their data.
- Angular DevTools - Debugging and Profiling for Angular applications.
- React Developer Tools - Inspect the React component hierarchies.
- Insight - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
- 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.
- 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.
- Three.js - Edit any three.js project.
- Metal.js Developer Tools - Inspect the Metal component hierarchies.
- Web Component DevTools - Inspect, modify and observe Web Components on page.
- App Inspector for Sencha - Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts.
- Three.js - Edit any three.js project.
- RailsPanel - View Ruby on Rails application profiling data.
- RailsPanel - View Ruby on Rails application profiling data.
-
-
DevTools tooling and ecosystem
-
Chrome Debugger integration with Editors
- WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
- VS Code - Debugger for Chrome - Breakpoint debugging in VS Code.
- VS Code - Elements for Microsoft Edge - Elements panel inside VS Code.
- ChromeREPL - Within Sublime Text, use the Chrome console.
- Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
- Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
- WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
-
CPU profile
- Wishbone Python framework - Profiling data can export as `.cpuprofile`.
- 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.
-
Multimedia
- snapline - Converts timeline screenshots to gif.
-
Network Inspection
-
Object formatting
- immutable-devtools - Custom formatter for Immutable-js values.
-
Timeline, Tracing & Profiling
- DevTools Timeline Viewer - Share URLs of your timeline recordings.
-
-
Learning
- Dev Tips - Large collection of tips as animated gifs.
- DevTools Tips - Collection of illustrated tips as mini tutorials.
- Can I DevTools? - Various workflows, documented. Also a weekly tips & tricks [newsletter](https://canidevtools.substack.com/).
- Web cheatcodes - Browser developer tools for non-developers.
- Dear Console - A collection of snippets to use in the browser console.
- Chrome Secret Menus - Comprehensive guide to internal pages and diagnostic tools in Chrome.
- Front-end Debugging Tools Handbook - Practical guide to mastering front-end debugging tools, from Chrome DevTools and framework extensions to AI-enhanced IDE debugging.
- Dear Console - A collection of snippets to use in the browser console.
-
Using DevTools frontend with other platforms
-
Browser Adapters
- PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.
- Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
- chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
- Facebook Stetho - Native Android debugging with Chrome DevTools.
- j2v8-debugger - Debugging JavaScript running in [J2V8](https://github.com/eclipsesource/J2V8) with Chrome DevTools.
- Dirac - Debugging of ClojsureScript.
- ndb - An improved Node.js debugging experience with the DevTools Frontend.
- thetool - CPU, memory, coverage, type profiling with Node.
- ruby/debug - Debugging functionality for Ruby.
-
Programming Languages
Categories
Sub Categories
Workflow
33
Libraries for driving the protocol (or a layer above)
26
Browser Adapters
11
Automation
10
Chrome Debugger integration with Editors
9
Themes
5
CPU profile
3
Network Inspection
3
Performance
2
Accessibility (A11y)
2
Developing with the protocol
2
Multimedia
1
The big two automation libraries
1
Timeline, Tracing & Profiling
1
Web Archivers and Indexers
1
Browsers
1
Object formatting
1
Keywords
chrome
16
chrome-devtools
12
chromium
8
automation
8
chrome-devtools-protocol
7
headless
6
chrome-debugging-protocol
6
testing
5
headless-chrome
5
puppeteer
5
javascript
5
devtools
5
chrome-headless
5
web
4
browser
4
devtools-protocol
3
chrome-browser
3
debugging
3
chrome-extension
3
cdp
3
debugging-tool
3
debugger
3
dotnet
2
google-chrome
2
kotlin
2
protocol
2
python
2
scraper
2
nodejs
2
proxy
2
crawler
2
golang
2
java
2
e2e-testing
2
crawling
2
end-to-end-testing
2
csharp
2
firefox
2
electron
2
testing-tools
2
mobile-safari
1
opera
1
debug
1
microsoft-edge
1
vscode
1
ruby
1
capture-traffic
1
editor
1
cdr
1
cobrowsing
1