https://github.com/correia-jpv/fucking-awesome-chrome-devtools
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem. With repository stars⭐ and forks🍴
https://github.com/correia-jpv/fucking-awesome-chrome-devtools
List: fucking-awesome-chrome-devtools
awesome awesome-list chrome chrome-browser chrome-devtools developer-tools devtools devtools-documentation devtools-extension devtools-protocol
Last synced: 7 days ago
JSON representation
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem. With repository stars⭐ and forks🍴
- Host: GitHub
- URL: https://github.com/correia-jpv/fucking-awesome-chrome-devtools
- Owner: Correia-jpv
- License: cc0-1.0
- Created: 2022-02-06T11:38:30.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-14T04:00:13.000Z (20 days ago)
- Last Synced: 2025-04-27T09:56:46.536Z (7 days ago)
- Topics: awesome, awesome-list, chrome, chrome-browser, chrome-devtools, developer-tools, devtools, devtools-documentation, devtools-extension, devtools-protocol
- Homepage:
- Size: 120 KB
- Stars: 19
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
- ultimate-awesome - fucking-awesome-chrome-devtools - Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem. With repository stars⭐ and forks🍴. (Other Lists / Julia Lists)
README
# Awesome Chrome DevTools [](https://awesome.re)
> Awesome tooling and resources in the Chrome DevTools ecosystem
## Contents
- [Learning](#learning)
- [DevTools tooling and ecosystem](#devtools-tooling-and-ecosystem)
- [Chrome DevTools Protocol](#chrome-devtools-protocol)
- [Using DevTools frontend with other platforms](#using-devtools-frontend-with-other-platforms)
- [DevTools Extensions](#devtools-extensions)
- [Alumni](#alumni)---
## Learning
- 🌎 [Dev Tips](umaar.com/dev-tips/) - Large collection of tips as animated gifs.
- 🌎 [DevTools Tips](devtoolstips.org/) - Collection of illustrated tips as mini tutorials.
- 🌎 [Can I DevTools?](www.canidev.tools/) - Various workflows, documented. Also a weekly tips & tricks 🌎 [newsletter](canidevtools.substack.com/).
- 🌎 [Web cheatcodes](codepo8.github.io/web-cheatcodes/) - Browser developer tools for non-developers.
- 🌎 [Dear Console](codepo8.github.io/dearconsole) - A collection of snippets to use in the browser console.---
## DevTools tooling and ecosystem
### Object formatting
-664⭐
31🍴
[immutable-devtools](https://github.com/andrewdavey/immutable-devtools)) - Custom formatter for Immutable-js values.### Network Inspection
-4550⭐
123🍴
[betwixt](https://github.com/kdzwinel/betwixt)) - System level network proxy, providing inspection via Network panel.
- 🌎 [Weer](weerdbg.com/) - A HTTP protocol debugger **(closed source)**### CPU profile
-37⭐
9🍴
[call-trace](https://github.com/brendankenny/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.
-168⭐
16🍴
[cpuprofilify](https://github.com/thlorenz/cpuprofilify)) - Converts output of various profiling/sampling tools to the `.cpuprofile` format.
- 🌎 [Wishbone python framework](wishbone.readthedocs.io/en/latest/misc/profiling.html) - Profiling data can export as `.cpuprofile`.### Multimedia
-395⭐
17🍴
[snapline](https://github.com/pmdartus/snapline)) - Converts timeline screenshots to gif.### Timeline, Tracing & Profiling
- 🌎 [DevTools Timeline Viewer](chromedevtools.github.io/timeline-viewer/) - Share URLs of your timeline recordings.### Chrome Debugger integration with Editors
-?⭐
?🍴
[VS Code - Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug/)) - Breakpoint debugging in VS Code.
-771⭐
283🍴
[VS Code - Elements for Microsoft Edge](https://github.com/microsoft/vscode-edge-devtools)) - Elements panel inside VS Code.
-356⭐
12🍴
[ChromeREPL](https://github.com/acarabott/ChromeREPL)) - Within Sublime Text, use the Chrome console.
- [Sublime Web Inspector](http://sokolovstas.github.io/SublimeWebInspector/) - JavaScript Breakpoint debugging right in Sublime Text.
- 🌎 [WebStorm/JetBrains Chrome Extension](www.jetbrains.com/help/webstorm/2017.1/configuring-javascript-debugger-and-jetbrains-chrome-extension.html) - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.---
## Chrome DevTools Protocol
-1226⭐
240🍴
[ChromeDevTools/devtools-protocol](https://github.com/chromedevtools/devtools-protocol)) - **Canonical location of the protocol JSON**. Issue tracker for protocol bugs. TypeScript types.
- 🌎 [DevTools Protocol API Docs](chromedevtools.github.io/devtools-protocol/) - Easy browsable UI for exploring the protocol's domains, methods and events.### Developing with the protocol
-?⭐
?🍴
[chrome-remote-interface Wiki](https://github.com/cyrus-and/chrome-remote-interface/wiki)) - Many useful recipes.
-205⭐
27🍴
[Chrome Protocol Proxy](https://github.com/wendigo/chrome-protocol-proxy)) - Tool for debugging clients using devtools protocol.### The big two automation libraries
-?⭐
?🍴
[Puppeteer](https://github.com/GoogleChrome/puppeteer/)) - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also2462⭐
159🍴
[awesome-puppeteer](https://github.com/transitive-bullshit/awesome-puppeteer)).
-71621⭐
4065🍴
[Playwright](https://github.com/microsoft/playwright)) - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also1088⭐
122🍴
[awesome-playwright](https://github.com/mxschmitt/awesome-playwright)).### Libraries for driving the protocol (or a layer above)
- JavaScript/Node.js:
4357⭐
315🍴
[chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface))
- TypeScript/Node.js:133⭐
19🍴
[chrome-debugging-client](https://github.com/TracerBench/chrome-debugging-client))
- Typescript/Node.js: 🌎 [noice-json-rpc](www.npmjs.com/package/noice-json-rpc) - A proxy-based implementation to expose the CDP as its API.
- Typescript/Node.js:?⭐
?🍴
[Taiko](https://github.com/getgauge/taiko/))
- Rust:?⭐
?🍴
[Rust Headless Chrome](https://github.com/atroche/rust-headless-chrome/))
- Java:227⭐
78🍴
[chrome-devtools-java-client](https://github.com/kklisura/chrome-devtools-java-client))
- Java:759⭐
161🍴
[jvppeteer](https://github.com/fanyong920/jvppeteer)) - Headless Chrome For Java
- Python:111⭐
25🍴
[PyCDP](https://github.com/hyperiongray/python-chrome-devtools-protocol)) - Pure-Python, sans-IO wrappers. See also the67⭐
17🍴
[Trio CDP driver](https://github.com/hyperiongray/trio-chrome-devtools-protocol))
- Python:119⭐
16🍴
[chromewhip](https://github.com/chuckus/chromewhip)) - drop-in replacement for the `splash` service
- Python:3824⭐
336🍴
[pyppeteer](https://github.com/pyppeteer/pyppeteer)) - puppeteer port
- Python:222⭐
28🍴
[ChromeController](https://github.com/fake-name/ChromeController)) - high-level browser mgmt
- Go:11660⭐
805🍴
[chromedp](https://github.com/chromedp/chromedp)) - High-level actions and tasks for driving browsers
- Go:752⭐
45🍴
[cdp](https://github.com/mafredri/cdp))
- Go:185⭐
31🍴
[gcd](https://github.com/wirepair/gcd))
- Go:396⭐
46🍴
[godet](https://github.com/raff/godet))
- Go:5836⭐
372🍴
[Rod](https://github.com/go-rod/rod))
- C#/.NET:3611⭐
462🍴
[Puppeteer Sharp](https://github.com/hardkoded/puppeteer-sharp)) - puppeteer port
- C#/dotnet:79⭐
27🍴
[chrome-dev-tools](https://github.com/BaristaLabs/chrome-dev-tools)) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
- C#/.NET:13⭐
2🍴
[dotnet-chrome-protocol](https://github.com/seclerp/dotnet-chrome-protocol)) - A runtime library and schema code generation tools for Chrome DevTools Protocol support in C#/.NET.
- Ruby:1845⭐
143🍴
[Ferrum](https://github.com/route/ferrum)) - high-level API to control Chrome in Ruby
- Ruby:1291⭐
98🍴
[Cuprite](https://github.com/machinio/cuprite)) - Capybara driver
- Kotlin:77⭐
11🍴
[chrome-reactive-kotlin](https://github.com/wendigo/chrome-reactive-kotlin)) - reactive (rxjava 2.x), low-level client library in Kotlin
- Kotlin:49⭐
8🍴
[chrome-devtools-kotlin](https://github.com/joffrey-bion/chrome-devtools-kotlin)) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
- Clojure:129⭐
20🍴
[clj-chrome-devtools](https://github.com/tatut/clj-chrome-devtools)) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
- Clojure:37⭐
4🍴
[cuic](https://github.com/milankinen/cuic)) - Providing a high-level API for UI test automation over the DevTools Protocol.
- PHP:178⭐
51🍴
[chrome-devtools-protocol](https://github.com/jakubkulhan/chrome-devtools-protocol)) - A PHP client library for the protocol.
- PHP:1341⭐
212🍴
[PuPHPeteer](https://github.com/rialto-php/puphpeteer)) - php bridge to node puppeteer### Browser Adapters
-340⭐
51🍴
[devtools-remote-debugger](https://github.com/Nice-PLQ/devtools-remote-debugger)) - Use devtools against a webpage; a CDP agent implemeted in client-side JS.
- 🌎 [Inspect](inspect.dev/) - Use devtools against iOS and Android, easily. Browser and Webviews. **(closed source)**## Using DevTools frontend with other platforms
#### Android
-12696⭐
1130🍴
[Facebook Stetho](https://github.com/facebook/stetho)) - Native Android debugging with Chrome DevTools.
-90⭐
24🍴
[j2v8-debugger](https://github.com/AlexTrotsenko/j2v8-debugger)) - Debugging JavaScript running in2580⭐
361🍴
[J2V8](https://github.com/eclipsesource/J2V8)) with Chrome DevTools.#### ClojureScript
-770⭐
30🍴
[Dirac](https://github.com/binaryage/dirac)) - Debugging of ClojsureScript.#### iOS
-5859⭐
594🍴
[PonyDebugger](https://github.com/square/PonyDebugger)) - Remote network and data debugging iOS apps with Chrome DevTools.#### Node.js
-10902⭐
234🍴
[ndb](https://github.com/GoogleChromeLabs/ndb)) - An improved Node.js debugging experience with the DevTools Frontend.
- 🌎 [Debugging Node.js with Chrome DevTools](medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27) - Guide on using the full debugging and profiling support in Node v6.3+.
-222⭐
6🍴
[thetool](https://github.com/sfninja/thetool)) - CPU, memory, coverage, type profiling with Node.
- 🌎 [chrome-devtools-frontend](www.npmjs.com/package/chrome-devtools-frontend) - Mirror of the frontend that ships in Chrome.#### Ruby
-1196⭐
134🍴
[ruby/debug](https://github.com/ruby/debug)) - Debugging functionality for Ruby.---
## DevTools Extensions
### Accessibility (A11y)
- 🌎 [Chromelens](chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd) - 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](chrome.google.com/webstore/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp?hl=en) - View PHP application profiling data.
- 🌎 [Emulated Device Lab](chrome.google.com/webstore/detail/emulated-device-lab/oaonfodocibcdobdeelbbfggjombamff) - Experiment with multiple devices being emulated at the same time.
- 🌎 [RailsPanel](chrome.google.com/webstore/detail/railspanel/gjpfobpafnhjhbajcjgccbbdofdckggg?hl=en-US) - View Ruby on Rails application profiling data.
- 🌎 [React Developer Tools](chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) - Inspect the React component hierarchies.
- 🌎 [EmberJS Inspector](chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) - Allows you to inspect EmberJS objects in your application.
-24756⭐
4146🍴
[VueJS Developer Tools](https://github.com/vuejs/vue-devtools)) - Inspect VueJS components and manipulate their data.
- 🌎 [Angular Batarang](chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk) - Inspect an Angular application's scope and profile its data.
- 🌎 [Augury](augury.angular.io) - Debugging and Profiling for Angular 2 applications.
- 🌎 [Marionette Inspector](chrome.google.com/webstore/detail/marionette-inspector/fbgfjlockdhidoaempmjcddibjklhpka) - Inspect a Marionette application's views, events, and live data.
- 🌎 [Backbone Debugger](chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd) - Inspect a Backbone application's views, models, events, and routes.
- 🌎 [App Inspector for Sencha](chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae) - Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts.
- 🌎 [Redux Devtools](chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) - Inspect Redux with actions history, undo and replay.
- 🌎 [Three.js](chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea/) - Edit any three.js project.
-?⭐
?🍴
[Insight](https://github.com/3Dparallax/insight/)) - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
-46⭐
4🍴
[BEM devtools](https://github.com/escaton/bem-chrome-devtools)) - Inspect BEM entities expressed in `i-bem` framework.
- 🌎 [Metal.js Developer Tools](chrome.google.com/webstore/detail/metaljs-developer-tools/fagnjmppkokolnbloalifcmcooldhiik) - Inspect the Metal component hierarchies.
- 🌎 [Web Component DevTools](chrome.google.com/webstore/detail/web-component-devtools/gdniinfdlmmmjpnhgnkmfpffipenjljo) - Inspect, modify and observe Web Components on page.### Themes
- 🌎 [DevTools Author](chrome.google.com/webstore/detail/devtools-author/egfhcfdfnajldliefpdoaojgahefjhhi) - A selection of themes to modify parts of DevTools related to authoring web applications.
- 🌎 [Zero Dark Matrix](chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo) - Dark theme for Chrome Developer Tools.
- 🌎 [Material UI Theme](chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo) - Provides various Material Design inspired themes.### Performance
-198⭐
11🍴
[sloth](https://github.com/denar90/sloth)) - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
-247⭐
31🍴
[TracerBench](https://github.com/TracerBench/tracerbench)) - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.### Automation
-226⭐
22🍴
[Puppeteer IDE](https://github.com/gajananpp/puppeteer-ide-extension)) - Standalone Puppeteer playground in browser's developer tools.
-355⭐
43🍴
[k6 browser](https://github.com/grafana/xk6-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.-
93⭐
10🍴
[Remote Debug Gateway](https://github.com/RemoteDebug/remotedebug-gateway)) - Allows you to connect a client to multiple browsers at once.
- Multiuser DevTools:692⭐
40🍴
[DevTools Remote](https://github.com/auchenberg/devtools-remote)) - Remotely debug someone else's browser.
-144⭐
23🍴
[DevTools Backend](https://github.com/christian-bromann/devtools-backend)) - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
- Python CDP driver:635⭐
115🍴
[pychrome](https://github.com/fate0/pychrome)) - low level CDP transport handler
-6034⭐
472🍴
[ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy)) - Exposes Mobile Safari & UIWebView instances via the CDP.
-2734⭐
225🍴
[Remote Debug iOS WebKit adapter](https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter)) - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
-573⭐
40🍴
[IE Diagnostics Adapter](https://github.com/Microsoft/IEDiagnosticsAdapter)) - Protocol adaptor for Microsoft IE 11 to CDP.
-42⭐
2🍴
[go-debugger-devtools](https://github.com/allada/go-debugger-devtools))## Source
6318⭐
363🍴
[ChromeDevTools/awesome-chrome-devtools](https://github.com/ChromeDevTools/awesome-chrome-devtools))