Ranked awesome lists, all in one place
This list is a copy of ChromeDevTools/awesome-chrome-devtools with ranks
Awesome chrome-devtools 
Awesome tooling and resources in the Chrome DevTools ecosystem
Learning
- Dev Tips - Large collection of tips as animated gifs.
DevTools as an IDE
- Chrome DevTools App ★1467 - Standalone app which can inspect various targets.
- DevTools Remote ★559 ⏳1Y - Remotely debug someone else’s browser.
- DevTools Snippets ★1376 - Collection of snippets.
DevTools tooling and ecosystem
Object formatting
- immutable-devtools ★560 - Custom formatter for Immutable-js values.
Network Inspection
- betwixt ★3751 - System level network proxy, providing inspection via Network panel
CPU profile
- JSCLegacyProfiler/json2trace - Converts Safari’s JavaScriptCore profiler output into
.cpuprofile - call-trace ★13 ⏳2Y - 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 ★128 ⏳1Y - Converts output of various profiling/sampling tools to the
.cpuprofileformat. - Wishbone python framework - Profiling data can export as
.cpuprofile.
Multimedia
- snapline ★314 ⏳2Y - 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 ★1176 - Chrome Debugger for Visual Studio Code
- Sublime Web Inspector - Debug Javascript right in the Sublime Text editor
- WebStorm & JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
Chrome DevTools Protocol
- DevTools Protocol API Docs - Easy browsable UI for exploring the protocol’s domains, methods and events
- ChromeDevTools/devtools-protocol ★184 - Issue tracker for protocol bugs
- Remote Debug Gateway ★65 ⏳2Y - Allows you to connect a client to multiple browsers at once.
- DevTools Backend ★38 - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
- RemoteDebug - Initiative to normalize debugging protocols across today’s browsers.
- ChromeDriver - The official Selenium/WebDriver implementation for Chrome is implemented on top of the DevTools Protocol.
- Chrome Protocol Proxy ★53 - tool for debugging clients using devtools protocol
- Puppeteer ★33208 - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol
Protocol driver libraries (in various languages)
- JavaScript/Node.js: chrome-remote-interface ★2399 - The most-used JavaScript API for the protocol
- TypeScript/Node.js: chrome-debugging-client - A TypeScript async/await-friendly debugging client
- Java: cdp4j ★162 - Java library for CDP
- Python: PyChromeDevTools ★66 - Python wrapper for Google Chrome Dev Protocol
- Python: chromewhip ★42 - Python 3 asyncio driver to manage concurrent requests to Google Chrome Devtools endpoints
- Python: pychrome ★196 - A Python Package for the Google Chrome Dev Protocol
- Go: chromedp - High level actions and tasks for driving browsers via the Chrome Debugging Protocol
- Go: cdp ★133 - A Golang library for the protocol
- Go: gcd ★141 - A different client library in Go
- Go: godet ★200 - Also different, also Go.
- C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
- Ruby: ChromeRemote ★42 - A client implementation of the Chrome DevTools Protocol in Ruby
- Kotlin: chrome-reactive-kotlin ★30 - reactive (rxjava 2.x), low-level client library in Kotlin
- Clojure: clj-chrome-devtools ★69 - A Clojure library for the protocol. The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
- PHP: chrome-devtools-protocol ★30 - A PHP client library for the protocol.
Developing with the protocol
- chrome-remote-interface Wiki - Many useful recipes
- Getting Started with Headless Chrome
- crmux ★100 - Multiplexes protocol connections.
- automated-chrome-profiling ★756 - Node.js recipes for automating JavaScript profiling in Chrome.
- chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
- chrome-timeline-model - Uses frontend as lib to process profiling data.
- headless-devtools ★402 - Perform various DevTools actions from code (e.g. get CSS Coverage, JS Heap snapshot). Uses Puppeteer + frontend as lib.
- crconsole ★205 ⏳1Y - Terminal based chrome console and debugger.
- sloth ★90 - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
Browser Adapters
- Remote Debug Firefox adapter ★112 ⏳1Y - Translates Firefox’s devtools protocol to the CDP
- ios-webkit-debug-proxy ★3679 - Exposes Mobile Safari & UIWebView instances via the CDP.
- Remote Debug iOS WebKit adapter ★723 - Builts upon ios-webkit-debug-proxy and translates WebKit’s Remote Debugging Protocol API to the CDP
- IE Diagnostics Adapter ★546 ⏳2Y - Protocol adaptor for Microsoft IE 10/11 to CDP.
- Edge Diagnostics Adaptor - Protocol adaptor that enables tools to debug Edge using the CDP.
Using DevTools frontend with other targets/platforms
Android
- Facebook Stetho ★9875 - Native Android debugging with Chrome DevTools
ClosureScript
- Dirac ★561 - Debugging of ClojsureScript
Lua
- Mare ★222 - Lua debugging with Chrome DevTools
iOS
- PonyDebugger ★5603 ⏳1Y - Remote network and data debugging iOS apps with Chrome DevTools
Go
Node.js
- Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+
- devtool ★3784 - Debug & profile Node.js apps with Chrome DevTools (using Electron).
- buggerJS ★153 ⏳1Y - Provides Chrome DevTools bindings for node.
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 ★8698 - 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 ★724 - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
- BEM devtools ★38 - Inspect BEM entities expressed in
i-bemframework. - Metal.js Developer Tools - Inspect the Metal component hierarchies.
UX
- 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.
Performance
- Chrome React Perf - An Operation Interface for react-addons-perf Package.
Testing
- UI-automation-chrome-extension - Provides simple DOM selectors with Java code snippets so you can write automated Selenium tests faster.
This list is a copy of ChromeDevTools/awesome-chrome-devtools with ranks