Awesome Chrome Devtools Overview

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

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

[ Daily / Weekly / Overview ]

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

DevTools tooling and ecosystem

Object formatting

• immutable-devtools (⭐661) - Custom formatter for Immutable-js values.

Network Inspection

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

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.
• Wishbone python framework - Profiling data can export as .cpuprofile.

Multimedia

• snapline (⭐393) - 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 (⭐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.
• DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.

Developing with the protocol

• chrome-remote-interface Wiki (⭐4.2k) - Many useful recipes.
• Chrome Protocol Proxy (⭐186) - Tool for debugging clients using devtools protocol.

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)
• Rust: Rust Headless Chrome (⭐6)
• Java: chrome-devtools-java-client (⭐214)
• Java: jvppeteer (⭐686) - Headless Chrome For Java
• 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: pyppeteer (⭐3.6k) - puppeteer port
• 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)
• Go: Rod (⭐5.1k)
• C#/.NET: Puppeteer Sharp (⭐3.3k) - puppeteer port
• C#/dotnet: chrome-dev-tools (⭐76) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
• Ruby: Ferrum (⭐1.7k) - high-level API to control Chrome in Ruby
• Ruby: Cuprite (⭐1.2k) - Capybara driver
• Kotlin: chrome-reactive-kotlin (⭐75) - reactive (rxjava 2.x), low-level client library in Kotlin
• Kotlin: chrome-devtools-kotlin (⭐43) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
• Clojure: clj-chrome-devtools (⭐130) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
• Clojure: cuic (⭐36) - Providing a high-level API for UI test automation over the DevTools Protocol.
• PHP: chrome-devtools-protocol (⭐170) - A PHP client library for the protocol.
• PHP: PuPHPeteer (⭐1.3k) - php bridge to node puppeteer

Browser Adapters

• devtools-remote-debugger (⭐273) - 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

• Facebook Stetho (⭐13k) - Native Android debugging with Chrome DevTools.
• j2v8-debugger (⭐87) - Debugging JavaScript running in J2V8 (⭐2.5k) with Chrome DevTools.

ClojureScript

• Dirac (⭐769) - Debugging of ClojsureScript.

iOS

• PonyDebugger (⭐5.9k) - Remote network and data debugging iOS apps with Chrome DevTools.

Node.js

• ndb (⭐11k) - 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+.
• thetool (⭐219) - CPU, memory, coverage, type profiling with Node.
• chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.

Ruby

• ruby/debug (⭐1.1k) - Debugging functionality for Ruby.

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

• sloth (⭐196) - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
• TracerBench (⭐240) - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Automation

• Puppeteer IDE (⭐202) - Standalone Puppeteer playground in browser's developer tools.
• k6 browser (⭐334) - 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.

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