Track Awesome Chrome Devtools Updates Weekly
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 ChromeDevTools/awesome-chrome-devtools · ⭐ 6K · 🏷️ Front-End Development
Aug 12 - Aug 18, 2024
Automation / Ruby
- k6 browser (⭐334) - Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.
Jun 03 - Jun 09, 2024
Browser Adapters
- devtools-remote-debugger (⭐273) - Use devtools against a webpage; a CDP agent implemeted in client-side JS.
Oct 10 - Oct 16, 2022
Learning
- Can I DevTools? - Various workflows, documented. Also a weekly tips & tricks newsletter.
- Web cheatcodes - Browser developer tools for non-developers.
- Dear Console - A collection of snippets to use in the browser console.
Sep 05 - Sep 11, 2022
Accessibility (A11y) / Ruby
- 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.
Aug 15 - Aug 21, 2022
Libraries for driving the protocol (or a layer above)
- C#/.NET: Puppeteer Sharp (⭐3.3k) - puppeteer port
Aug 01 - Aug 07, 2022
Learning
- DevTools Tips - Collection of illustrated tips as mini tutorials.
Jul 18 - Jul 24, 2022
The big two automation libraries
- Puppeteer (⭐88k) - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also awesome-puppeteer (⭐2.4k).
- Playwright (⭐65k) - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also awesome-playwright (⭐829).
Libraries for driving the protocol (or a layer above)
- JavaScript/Node.js: chrome-remote-interface (⭐4.2k)
- TypeScript/Node.js: chrome-debugging-client (⭐134)
- Typescript/Node.js: noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
- Typescript/Node.js: Taiko (⭐3.6k)
- Python: pyppeteer (⭐3.6k) - puppeteer port
- Ruby: Ferrum (⭐1.7k) - high-level API to control Chrome in Ruby
- Clojure: cuic (⭐36) - Providing a high-level API for UI test automation over the DevTools Protocol.
- PHP: PuPHPeteer (⭐1.3k) - php bridge to node puppeteer
Browser Adapters
- Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)
Using DevTools frontend with other platforms / Ruby
- ruby/debug (⭐1.1k) - Debugging functionality for Ruby.
Workflow / Ruby
- Web Component DevTools - Inspect, modify and observe Web Components on page.
Alumni / Ruby
- Remote Debug Gateway (⭐91) - Allows you to connect a client to multiple browsers at once.
- Multiuser DevTools: DevTools Remote (⭐686) - Remotely debug someone else's browser.
- DevTools Backend (⭐143) - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
- Python CDP driver: pychrome (⭐602) - low level CDP transport handler
- ios-webkit-debug-proxy (⭐5.9k) - Exposes Mobile Safari & UIWebView instances via the CDP.
- Remote Debug iOS WebKit adapter (⭐2.7k) - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
- IE Diagnostics Adapter (⭐575) - Protocol adaptor for Microsoft IE 11 to CDP.
Jan 10 - Jan 16, 2022
Automation / Ruby
- Puppeteer IDE (⭐202) - Standalone Puppeteer playground in browser's developer tools.
Mar 08 - Mar 14, 2021
Libraries for driving the protocol (or a layer above)
- Kotlin: chrome-devtools-kotlin (⭐43) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
Jan 18 - Jan 24, 2021
Libraries for driving the protocol (or a layer above)
- Java: jvppeteer (⭐686) - Headless Chrome For Java
- Go: Rod (⭐5.1k)
Nov 18 - Nov 24, 2019
Themes / Ruby
- Material UI Theme - Provides various Material Design inspired themes.
Performance / Ruby
- TracerBench (⭐240) - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
Sep 09 - Sep 15, 2019
Network Inspection
- Weer - A HTTP protocol debugger (closed source)
Chrome Debugger integration with Editors
- VS Code - Debugger for Chrome (⭐2.2k) - Breakpoint debugging in VS Code.
- VS Code - Elements for Microsoft Edge (⭐744) - Elements panel inside VS Code.
- ChromeREPL (⭐355) - Within Sublime Text, use the Chrome console.
- 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.
Chrome DevTools Protocol
- ChromeDevTools/devtools-protocol (⭐1.1k) - Canonical location of the protocol JSON. Issue tracker for protocol bugs. TypeScript types.
Developing with the protocol
- chrome-remote-interface Wiki (⭐4.2k) - Many useful recipes.
- Chrome Protocol Proxy (⭐186) - Tool for debugging clients using devtools protocol.
Libraries for driving the protocol (or a layer above)
- Python: PyCDP (⭐94) - Pure-Python, sans-IO wrappers. See also the Trio CDP driver (⭐62)
- Python: chromewhip (⭐117) - drop-in replacement for the
splashservice
- Python: ChromeController (⭐213) - high-level browser mgmt
- Go: chromedp (⭐11k) - High-level actions and tasks for driving browsers
- Go: cdp (⭐722)
- Go: gcd (⭐183)
- Go: godet (⭐390)
- Ruby: Cuprite (⭐1.2k) - Capybara driver
- Clojure: clj-chrome-devtools (⭐130) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
Using DevTools frontend with other platforms / Android
- j2v8-debugger (⭐87) - Debugging JavaScript running in J2V8 (⭐2.5k) with Chrome DevTools.
Using DevTools frontend with other platforms / Node.js
- ndb (⭐11k) - An improved Node.js debugging experience with the DevTools Frontend.
- thetool (⭐219) - CPU, memory, coverage, type profiling with Node.
- chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
Performance / Ruby
- sloth (⭐196) - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
Oct 29 - Nov 04, 2018
Network Inspection
- betwixt (⭐4.5k) - System level network proxy, providing inspection via Network panel.
CPU profile
- Wishbone python framework - Profiling data can export as
.cpuprofile.
Chrome DevTools Protocol
- DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.
Using DevTools frontend with other platforms / Android
- Facebook Stetho (⭐13k) - Native Android debugging with Chrome DevTools.
Using DevTools frontend with other platforms / ClojureScript
- Dirac (⭐769) - Debugging of ClojsureScript.
Using DevTools frontend with other platforms / iOS
- PonyDebugger (⭐5.9k) - Remote network and data debugging iOS apps with Chrome DevTools.
Using DevTools frontend with other platforms / Node.js
- Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
Workflow / Ruby
- Augury - Debugging and Profiling for Angular 2 applications.
Mar 05 - Mar 11, 2018
Libraries for driving the protocol (or a layer above)
- PHP: chrome-devtools-protocol (⭐170) - A PHP client library for the protocol.
Aug 28 - Sep 03, 2017
Libraries for driving the protocol (or a layer above)
- Kotlin: chrome-reactive-kotlin (⭐75) - reactive (rxjava 2.x), low-level client library in Kotlin
Workflow / Ruby
- Metal.js Developer Tools - Inspect the Metal component hierarchies.
Jul 03 - Jul 09, 2017
Libraries for driving the protocol (or a layer above)
- C#/dotnet: chrome-dev-tools (⭐76) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
May 29 - Jun 04, 2017
Object formatting
- immutable-devtools (⭐661) - Custom formatter for Immutable-js values.
CPU profile
- call-trace (⭐35) - Can instrument your JS with hooks, and then generate a
.cpuprofileof the of the complete (non-sampled) execution. View either time or call counts.
- cpuprofilify (⭐167) - Converts output of various profiling/sampling tools to the
.cpuprofileformat.
Multimedia
- snapline (⭐393) - Converts timeline screenshots to gif.
Timeline, Tracing & Profiling
- DevTools Timeline Viewer - Share URLs of your timeline recordings.
Aug 01 - Aug 07, 2016
Learning
- Dev Tips - Large collection of tips as animated gifs.
Workflow / Ruby
- 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 (⭐25k) - Inspect VueJS components and manipulate their data.
- Angular Batarang - Inspect an Angular application's scope and profile its 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.
- Redux Devtools - Inspect Redux with actions history, undo and replay.
- Three.js - Edit any three.js project.
- Insight (⭐910) - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
- BEM devtools (⭐45) - Inspect BEM entities expressed in
i-bemframework.
Themes / Ruby
- 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.