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 - Standalone devtools app which can inspect various targets.
• DevTools Remote - Remotely debug someone else's browser via Chrome DevTools.
• DevTools Snippets - Collection of DevTools 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.
• buggerJS - Provides Chrome DevTools bindings for node.

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.
• devtools-compat-proxy - Young effort to translate modern Safari debugging protocol to modern CDP.
• crmux - Multiplexer to handle multiple clients.
• PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools

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.

Chrome Debugger integration with Editors

• Showcase Protocol Clients - Lists many, like Brackets, Vim, LightTable, Sublime, etc.
• 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 - Chrome devtools extension for debugging Vue.js applications
• Angular Batarang - Inspect an Angular application's scope and profile its data.
• Marionette Inspector - Inspect a Marionette application's views, events or live data.
• Backbone Debugger - Inspect a Backbone application's views, models, events and routes.

UX

• DevTools Author - A selection of author settings for Chrome Developer Tools.
• Zero Dark Matrix - Dark theme for Chrome Developer Tools.