Awesome Chrome DevTools

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents

• Learning
• DevTools tooling and ecosystem
• Chrome DevTools Protocol
• Using DevTools frontend with other platforms
• Applications
• DevTools Extensions
• Alumni

---

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.
• 🌎 Web cheatcodes - Browser developer tools for non-developers.
• 🌎 Dear Console - A collection of snippets to use in the browser console.
•     58⭐     12🍴 Chrome Secret Menus) - Comprehensive guide to internal pages and diagnostic tools in Chrome.

---

DevTools tooling and ecosystem

Object formatting

•    672⭐     33🍴 immutable-devtools) - Custom formatter for Immutable-js values.

Network Inspection

•   4562⭐    122🍴 betwixt) - System level network proxy, providing inspection via Network panel.
• 🌎 Weer - A HTTP protocol debugger (closed source)

CPU profile

•     43⭐      8🍴 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.
•    169⭐     16🍴 cpuprofilify) - Converts output of various profiling/sampling tools to the .cpuprofile format.
• 🌎 Wishbone Python framework - Profiling data can export as .cpuprofile.

Multimedia

•    401⭐     17🍴 snapline) - Converts timeline screenshots to gif.

Timeline, Tracing & Profiling

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

Chrome Debugger integration with Editors

•      ?⭐      ?🍴 VS Code - Debugger for Chrome) - Breakpoint debugging in VS Code.
•    804⭐    331🍴 VS Code - Elements for Microsoft Edge) - Elements panel inside VS Code.
•    356⭐     12🍴 ChromeREPL) - 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

•   1423⭐    269🍴 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.
•    246⭐     28🍴 Chrome Protocol Proxy) - Tool for debugging clients using devtools protocol.

The big two automation libraries

•      ?⭐      ?🍴 Puppeteer) - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also   2543⭐    158🍴 awesome-puppeteer).
•  82882⭐   5168🍴 Playwright) - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also   1377⭐    168🍴 awesome-playwright).

Libraries for driving the protocol (or a layer above)

• JavaScript/Node.js:   4496⭐    322🍴 chrome-remote-interface)
• TypeScript/Node.js:    134⭐     19🍴 chrome-debugging-client)
• TypeScript/Node.js: 🌎 noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
• TypeScript/Node.js:      ?⭐      ?🍴 Taiko)
• Rust:      ?⭐      ?🍴 Rust Headless Chrome)
• Java:    239⭐     80🍴 chrome-devtools-java-client)
• Java:    805⭐    169🍴 jvppeteer) - Headless Chrome For Java
• Python:    136⭐     27🍴 PyCDP) - Pure-Python, sans-IO wrappers. See also the     71⭐     17🍴 Trio CDP driver)
• Python:    120⭐     14🍴 chromewhip) - drop-in replacement for the splash service
• Python:   3938⭐    344🍴 pyppeteer) - Puppeteer port
• Python:    228⭐     29🍴 ChromeController) - high-level browser mgmt
• Go:  12744⭐    857🍴 chromedp) - High-level actions and tasks for driving browsers
• Go:    784⭐     49🍴 cdp)
• Go:    187⭐     31🍴 gcd)
• Go:    401⭐     45🍴 godet)
• Go:   6722⭐    439🍴 Rod)
• C#/.NET:   3857⭐    488🍴 Puppeteer Sharp) - Puppeteer port
• C#/dotnet:     81⭐     28🍴 chrome-dev-tools) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
• C#/.NET:     27⭐      2🍴 dotnet-chrome-protocol) - A runtime library and schema code generation tools for Chrome DevTools Protocol support in C#/.NET.
• Ruby:   1977⭐    157🍴 Ferrum) - high-level API to control Chrome in Ruby
• Ruby:   1353⭐     97🍴 Cuprite) - Capybara driver
• Kotlin:     76⭐     12🍴 chrome-reactive-kotlin) - reactive (rxjava 2.x), low-level client library in Kotlin
• Kotlin:     58⭐      8🍴 chrome-devtools-kotlin) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
• Clojure:    133⭐     20🍴 clj-chrome-devtools) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
• Clojure:     38⭐      4🍴 cuic) - Providing a high-level API for UI test automation over the DevTools Protocol.
• PHP:    183⭐     50🍴 chrome-devtools-protocol) - A PHP client library for the protocol.
• PHP:   1336⭐    210🍴 PuPHPeteer) - PHP bridge to node Puppeteer

Browser Adapters

•    408⭐     59🍴 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)

Using DevTools frontend with other platforms

Android

•  12716⭐   1121🍴 Facebook Stetho) - Native Android debugging with Chrome DevTools.
•     93⭐     24🍴 j2v8-debugger) - Debugging JavaScript running in   2626⭐    383🍴 J2V8) with Chrome DevTools.

ClojureScript

•    772⭐     29🍴 Dirac) - Debugging of ClojsureScript.

iOS

•   5858⭐    586🍴 PonyDebugger) - Remote network and data debugging iOS apps with Chrome DevTools.

Node.js

•  10889⭐    234🍴 ndb) - An improved Node.js debugging experience with the DevTools Frontend.
• 🌎 Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
•    223⭐      6🍴 thetool) - CPU, memory, coverage, type profiling with Node.
• 🌎 chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.

Ruby

•   1257⭐    142🍴 ruby/debug) - Debugging functionality for Ruby.

---

Applications

Browsers

•   3789⭐    403🍴 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.
•     61⭐      7🍴 Puppetromium) - A proof-of-concept web browser built with Puppeteer, written in Node.js, HTML and CSS, with 0% client-side JavaScript.

Web Archivers and Indexers

•   3888⭐    150🍴 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.

---

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.

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.
• 🌎 Ember.js Inspector - Allows you to inspect Ember.js objects in your application.
•  24780⭐   4155🍴 Vue.js Developer Tools) - Inspect Vue.js components and manipulate their data.
• 🌎 Angular DevTools - Debugging and Profiling for Angular 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.
•     47⭐      4🍴 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

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

Performance

•    200⭐      6🍴 sloth) - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
•    249⭐     29🍴 TracerBench) - A controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Automation

•    241⭐     26🍴 Puppeteer IDE) - Standalone Puppeteer playground in browser's developer tools.
•    361⭐     42🍴 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.

•     95⭐      7🍴 Remote Debug Gateway) - Allows you to connect a client to multiple browsers at once.
  • Multiuser DevTools:    701⭐     35🍴 DevTools Remote) - Remotely debug someone else's browser.
•    148⭐     24🍴 DevTools Backend) - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
• Python CDP driver:    642⭐    118🍴 pychrome) - low level CDP transport handler
•   6142⭐    475🍴 ios-webkit-debug-proxy) - Exposes Mobile Safari & UIWebView instances via the CDP.
  •   2744⭐    224🍴 Remote Debug iOS WebKit adapter) - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
•    572⭐     42🍴 IE Diagnostics Adapter) - Protocol adaptor for Microsoft IE 11 to CDP.
•     42⭐      2🍴 go-debugger-devtools)

Source

  6844⭐    415🍴 ChromeDevTools/awesome-chrome-devtools)