Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-chrome-devtools

Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
https://github.com/ChromeDevTools/awesome-chrome-devtools

Last synced: 2 days ago
JSON representation

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](https://canidevtools.substack.com/).
- Web cheatcodes - Browser developer tools for non-developers.
- Dear Console - A collection of snippets to use in the browser console.
DevTools tooling and ecosystem
- CPU profile
  - Wishbone python framework - Profiling data can export as `.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.
- Chrome Debugger integration with Editors
  - WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
  - VS Code - Elements for Microsoft Edge - Elements panel inside VS Code.
  - ChromeREPL - Within Sublime Text, use the Chrome console.
  - Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
  - VS Code - Debugger for Chrome - Breakpoint debugging in VS Code.
- Object formatting
  - immutable-devtools - Custom formatter for Immutable-js values.
- Network Inspection
  - betwixt - System level network proxy, providing inspection via Network panel.
  - Weer - A HTTP protocol debugger **(closed source)**
  - Weer - A HTTP protocol debugger **(closed source)**
- Multimedia
  - snapline - Converts timeline screenshots to gif.
- Timeline, Tracing & Profiling
  - DevTools Timeline Viewer - Share URLs of your timeline recordings.
Chrome DevTools Protocol
- Developing with the protocol
  - chrome-remote-interface Wiki - Many useful recipes.
  - Chrome Protocol Proxy - Tool for debugging clients using devtools protocol.
- The big two automation libraries
  - Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also [awesome-puppeteer](https://github.com/transitive-bullshit/awesome-puppeteer).
  - Playwright - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also [awesome-playwright](https://github.com/mxschmitt/awesome-playwright).
- Libraries for driving the protocol (or a layer above)
  - noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
  - Ferrum - high-level API to control Chrome in Ruby
  - chrome-remote-interface
  - chrome-debugging-client
  - Rust Headless Chrome
  - chrome-devtools-java-client
  - jvppeteer - Headless Chrome For Java
  - PyCDP - Pure-Python, sans-IO wrappers. See also the [Trio CDP driver](https://github.com/hyperiongray/trio-chrome-devtools-protocol)
  - pyppeteer - puppeteer port
  - ChromeController - high-level browser mgmt
  - chromedp - High-level actions and tasks for driving browsers
  - cdp
  - gcd
  - godet
  - Rod
  - Puppeteer Sharp - puppeteer port
  - chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
  - Cuprite - Capybara driver
  - chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
  - chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
  - clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
  - cuic - Providing a high-level API for UI test automation over the DevTools Protocol.
  - chrome-devtools-protocol - A PHP client library for the protocol.
  - PuPHPeteer - php bridge to node puppeteer
- Browser Adapters
  - Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. **(closed source)**
  - devtools-remote-debugger - Use devtools against a webpage; a CDP agent implemeted in client-side JS.
- Chrome Debugger integration with Editors
  - ChromeDevTools/devtools-protocol - **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.
Using DevTools frontend with other platforms
- Browser Adapters
  - Facebook Stetho - Native Android debugging with Chrome DevTools.
  - PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.
  - Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
  - chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
  - Facebook Stetho - Native Android debugging with Chrome DevTools.
  - Facebook Stetho - Native Android debugging with Chrome DevTools.
  - j2v8-debugger - Debugging JavaScript running in [J2V8](https://github.com/eclipsesource/J2V8) with Chrome DevTools.
  - Dirac - Debugging of ClojsureScript.
  - ndb - An improved Node.js debugging experience with the DevTools Frontend.
  - thetool - CPU, memory, coverage, type profiling with Node.
  - ruby/debug - 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.
  - React Developer Tools - Inspect the React component hierarchies.
  - EmberJS Inspector - Allows you to inspect EmberJS objects in your application.
  - 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.
  - Metal.js Developer Tools - Inspect the Metal component hierarchies.
  - Web Component DevTools - Inspect, modify and observe Web Components on page.
  - BEM devtools - Inspect BEM entities expressed in `i-bem` framework.
  - Augury - Debugging and Profiling for Angular 2 applications.
  - RailsPanel - View Ruby on Rails application profiling data.
- 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 - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
  - TracerBench - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
- Automation
  - Puppeteer IDE - Standalone Puppeteer playground in browser's developer tools.
Alumni
- Automation
  - Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.
  - DevTools Remote - Remotely debug someone else's browser.
  - DevTools Backend - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
  - pychrome - low level CDP transport handler
  - 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 11 to CDP.
  - go-debugger-devtools

Programming Languages

JavaScript 14 TypeScript 8 Go 6 Python 6 Clojure 3 Kotlin 3 Java 3 PHP 2 Ruby 2 C# 2

Ecosyste.ms: Awesome

awesome-chrome-devtools

Learning

DevTools tooling and ecosystem

CPU profile

Chrome Debugger integration with Editors

Object formatting

Network Inspection

Multimedia

Timeline, Tracing & Profiling

Chrome DevTools Protocol

Developing with the protocol

The big two automation libraries

Libraries for driving the protocol (or a layer above)

Browser Adapters

Chrome Debugger integration with Editors

Using DevTools frontend with other platforms

Browser Adapters

DevTools Extensions

Accessibility (A11y)

Workflow

Themes

Performance

Automation

Alumni

Automation