Awesome chrome-devtools

Awesome tooling and resources in the Chrome DevTools ecosystem

Learning

• { "id": "davinci", "object": "model", "created": 1686935002, "owned_by": "openai" }

DevTools as an IDE

• ###Chrome DevTools App - Standalone app which can inspect various targets.
• ###DevTools Remote - Remotely debug someone else's browser.
• ###DevTools Snippets - Collection of snippets.

---

DevTools tooling and ecosystem

Object formatting

• immutable-devtools - Custom formatter for Immutable-js values.

Network Inspection

• betwixt - System level network proxy, providing inspection via Network panel

CPU profile

• JSCLegacyProfiler/json2trace - Converts Safari's JavaScriptCore profiler output into .cpuprofile
• 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.
• cpuprofilify - Converts output of various profiling/sampling tools to the .cpuprofile format.
• Wishbone python framework - Profiling data can export as .cpuprofile.

Multimedia

• 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 - 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 - Issue tracker for protocol bugs
• Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.
• DevTools Backend - 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 - tool for debugging clients using devtools protocol
• Puppeteer - 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 - The most-used JavaScript API for the protocol
• TypeScript/Node.js: chrome-debugging-client - A TypeScript async/await-friendly debugging client
• Java: cdp4j - Java library for CDP
• Python: PyChromeDevTools - Python wrapper for Google Chrome Dev Protocol
• Python: chromewhip - Python 3 asyncio driver to manage concurrent requests to Google Chrome Devtools endpoints
• Python: pychrome - 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 - A Golang library for the protocol
• Go: gcd - A different client library in Go
• Go: godet - 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 - A client implementation of the Chrome DevTools Protocol in Ruby
• Kotlin: chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
• Clojure: clj-chrome-devtools - A Clojure library for the protocol. The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
• PHP: chrome-devtools-protocol - A PHP client library for the protocol.

Developing with the protocol

• chrome-remote-interface Wiki - Many useful recipes
• Getting Started with Headless Chrome
• crmux - Multiplexes protocol connections.
• automated-chrome-profiling - 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 - Perform various DevTools actions from code (e.g. get CSS Coverage, JS Heap snapshot). Uses Puppeteer + frontend as lib.
• crconsole - Terminal based chrome console and debugger.
• sloth - Chrome extension allows to enable and save CPU and network throttling for selected tabs.

Browser Adapters

• Remote Debug Firefox adapter - Translates Firefox's devtools protocol to the CDP
• ios-webkit-debug-proxy - Exposes Mobile Safari & UIWebView instances via the CDP.
• Remote Debug iOS WebKit adapter - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP
• IE Diagnostics Adapter - 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 - Native Android debugging with Chrome DevTools

ClosureScript

• Dirac - Debugging of ClojsureScript

Lua

• Mare - Lua debugging with Chrome DevTools

iOS

• PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools

Go

• go-debugger-devtools

Node.js

• Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+
• devtool - Debug & profile Node.js apps with Chrome DevTools (using Electron).
• buggerJS - 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 - 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 - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
• BEM devtools - Inspect BEM entities expressed in i-bem framework.
• 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.