Awesome Chrome-devtools

https://github.com/ChromeDevTools/awesome-chrome-devtools

Learning

---

• Dev Tips - Large collection of tips as animated gifs.

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.

Node.js + DevTools

---

chrome-remote-interface - The recommended Node.js API for the protocol. There are also TypeScript-friendly alternatives.
chrome-devtools-frontend - Mirror of the frontend shipping in Chrome.
chrome-timeline-model - Uses frontend as lib to process profiling data.
crmux - Multiplexes protocol connections.
crconsole - Terminal based chrome console and debugger.

Chrome Debugging Protocol

---

Debugging Protocol Viewer - Easy browsable UI for exploring the protocol's domains, methods and events
Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.
Remote Debug Firefox adapter - Translates Firefox's devtools protocol to the CDP
ios-webkit-debug-proxy - Exposes Mobile Safari & UIWebView instances via 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.
devtools-compat-proxy - Young effort to translate modern Safari debugging protocol to modern CDP.
crmux - Multiplexer to handle multiple clients.
RemoteDebug - Initiative to normalize debugging protocols across today's browsers.

Debugging Android & iOS w/ DevTools

---

PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools
Facebook Stetho - Native Android debugging with Chrome DevTools

Debugging Node.js w/ DevTools

---

devtool - Debug & profile Node.js apps with Chrome DevTools (using Electron).
buggerJS - Provides Chrome DevTools bindings for node.

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.

Chrome Debugger integration with Editors

---

• Showcase Protocol Clients - Lists many editor integration extensions.

• VS Code - Debugger for Chrome - Chrome Debugger for Visual Studio Code

Extensions

---

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.

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

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.