Track Awesome Chrome Devtools Updates Daily

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

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 ChromeDevTools/awesome-chrome-devtools · ⭐ 6K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Aug 17, 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 04, 2024

Browser Adapters

• devtools-remote-debugger (⭐273) - Use devtools against a webpage; a CDP agent implemeted in client-side JS.

Oct 10, 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 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, 2022

Libraries for driving the protocol (or a layer above)

• C#/.NET: Puppeteer Sharp (⭐3.3k) - puppeteer port

Aug 03, 2022

Learning

• DevTools Tips - Collection of illustrated tips as mini tutorials.

Jul 21, 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: Taiko (⭐3.6k)

• Rust: Rust Headless Chrome (⭐6)

• 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.

• go-debugger-devtools (⭐42)

Jul 20, 2022

Libraries for driving the protocol (or a layer above)

• Typescript/Node.js: noice-json-rpc - A proxy-based implementation to expose the CDP as its API.

Jan 13, 2022

Automation / Ruby

• Puppeteer IDE (⭐202) - Standalone Puppeteer playground in browser's developer tools.

Mar 09, 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 20, 2021

Libraries for driving the protocol (or a layer above)

• Java: jvppeteer (⭐686) - Headless Chrome For Java

• Go: Rod (⭐5.1k)

Nov 15, 2019

Themes / Ruby

• Material UI Theme - Provides various Material Design inspired themes.

Nov 13, 2019

Performance / Ruby

• TracerBench (⭐240) - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Sep 03, 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)

• Java: chrome-devtools-java-client (⭐214)

• Python: PyCDP (⭐94) - Pure-Python, sans-IO wrappers. See also the Trio CDP driver (⭐62)

• Python: chromewhip (⭐117) - drop-in replacement for the splash service

• 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.

Nov 01, 2018

Network Inspection

• betwixt (⭐4.5k) - System level network proxy, providing inspection via Network panel.

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.

Oct 31, 2018

CPU profile

• Wishbone python framework - Profiling data can export as .cpuprofile.

Mar 09, 2018

Libraries for driving the protocol (or a layer above)

• PHP: chrome-devtools-protocol (⭐170) - A PHP client library for the protocol.

Aug 31, 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

Aug 28, 2017

Workflow / Ruby

• Metal.js Developer Tools - Inspect the Metal component hierarchies.

Jul 06, 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.

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 .cpuprofile of the of the complete (non-sampled) execution. View either time or call counts.

• cpuprofilify (⭐167) - Converts output of various profiling/sampling tools to the .cpuprofile format.

Multimedia

• snapline (⭐393) - Converts timeline screenshots to gif.

Timeline, Tracing & Profiling

• DevTools Timeline Viewer - Share URLs of your timeline recordings.

Aug 02, 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-bem framework.

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.