Chrome DevTools
Contents_Index
- LEARNING6
- OBJECT FORMATTING1
- NETWORK INSPECTION2
- CPU PROFILE3
- MULTIMEDIA1
- TIMELINE, TRACING & PROFILING1
- CHROME DEBUGGER INTEGRATION WITH EDITORS5
- CHROME DEVTOOLS PROTOCOL2
- DEVELOPING WITH THE PROTOCOL2
- THE BIG TWO AUTOMATION LIBRARIES2
- LIBRARIES FOR DRIVING THE PROTOCOL (OR A LAYER ABOVE)27
- BROWSER ADAPTERS2
- ANDROID2
- CLOJURESCRIPT1
- IOS1
- NODE.JS4
- RUBY1
- BROWSERS2
- WEB ARCHIVERS AND INDEXERS1
- ACCESSIBILITY (A11Y)1
- WORKFLOW16
- THEMES3
- PERFORMANCE2
- AUTOMATION2
- ALUMNI6
Learning
6_ENTRIES- 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.
- Web cheatcodes
Browser developer tools for non-developers.
- Dear Console
A collection of snippets to use in the browser console.
- Chrome Secret Menus
Comprehensive guide to internal pages and diagnostic tools in Chrome.
Object formatting
1_ENTRIES- immutable-devtools
Custom formatter for Immutable-js values.
Network Inspection
2_ENTRIESCPU profile
3_ENTRIES- call-trace
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
Converts output of various profiling/sampling tools to the
.cpuprofileformat. - Wishbone Python framework
Profiling data can export as
.cpuprofile.
Multimedia
1_ENTRIES- snapline
Converts timeline screenshots to gif.
Timeline, Tracing & Profiling
1_ENTRIES- DevTools Timeline Viewer
Share URLs of your timeline recordings.
Chrome Debugger integration with Editors
5_ENTRIES- VS Code - Debugger for Chrome
Breakpoint debugging in VS Code.
- 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.
- WebStorm/JetBrains Chrome Extension
The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
Chrome DevTools Protocol
2_ENTRIES- 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.
Developing with the protocol
2_ENTRIES- chrome-remote-interface Wiki
Many useful recipes.
- Chrome Protocol Proxy
Tool for debugging clients using devtools protocol.
The big two automation libraries
2_ENTRIES- Puppeteer
Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also 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.
Libraries for driving the protocol (or a layer above)
27_ENTRIES- JavaScript/Node.js
JavaScript/Node.js: chrome-remote-interface
- TypeScript/Node.js
TypeScript/Node.js: chrome-debugging-client
- TypeScript/Node.js
TypeScript/Node.js: noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
- TypeScript/Node.js
TypeScript/Node.js: Taiko
- Rust
Rust: Rust Headless Chrome
- Python
Python: PyCDP - Pure-Python, sans-IO wrappers. See also the Trio CDP driver
- Python
Python: chromewhip - drop-in replacement for the
splashservice - Python
Python: ChromeController - high-level browser mgmt
- C#/.NET
C#/.NET: Puppeteer Sharp - Puppeteer port
- C#/dotnet
C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
- C#/.NET
C#/.NET: dotnet-chrome-protocol - A runtime library and schema code generation tools for Chrome DevTools Protocol support in C#/.NET.
- Kotlin
Kotlin: chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
- Kotlin
Kotlin: chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
- Clojure
Clojure: clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
- PHP
PHP: chrome-devtools-protocol - A PHP client library for the protocol.
- PHP
PHP: PuPHPeteer - PHP bridge to node Puppeteer
Browser Adapters
2_ENTRIES- devtools-remote-debugger
Use devtools against a webpage; a CDP agent implemeted in client-side JS.
- Inspect
Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)
Android
2_ENTRIES- Facebook Stetho
Native Android debugging with Chrome DevTools.
- j2v8-debugger
Debugging JavaScript running in J2V8 with Chrome DevTools.
ClojureScript
1_ENTRIES- Dirac
Debugging of ClojsureScript.
iOS
1_ENTRIES- PonyDebugger
Remote network and data debugging iOS apps with Chrome DevTools.
Node.js
4_ENTRIES- ndb
An improved Node.js debugging experience with the DevTools Frontend.
- Debugging Node.js with Chrome DevTools
Guide on using the full debugging and profiling support in Node v6.3+.
- thetool
CPU, memory, coverage, type profiling with Node.
- chrome-devtools-frontend
Mirror of the frontend that ships in Chrome.
Ruby
1_ENTRIES- ruby/debug
Debugging functionality for Ruby.
Browsers
2_ENTRIES- BrowserBox
Embed Chrome in a web page, largely powered by DevTools and supporting multiuser browsing, remote DevTools, audio, and documents like
.docx,.pdf, and more. - Puppetromium
A proof-of-concept web browser built with Puppeteer, written in Node.js, HTML and CSS, with 0% client-side JavaScript.
Web Archivers and Indexers
1_ENTRIES- dn
Archive and index pages you browse for offline viewing and search, implemented using the
Fetchdomain's interceptions, and works with any Chromium-based browser.
Accessibility (A11y)
1_ENTRIES- 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
16_ENTRIES- 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.
- Ember.js Inspector
Allows you to inspect Ember.js objects in your application.
- Vue.js Developer Tools
Inspect Vue.js components and manipulate their data.
- Angular DevTools
Debugging and Profiling for Angular 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-bemframework. - Metal.js Developer Tools
Inspect the Metal component hierarchies.
- Web Component DevTools
Inspect, modify and observe Web Components on page.
Themes
3_ENTRIES- 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
2_ENTRIES- sloth
Chrome extension allows to enable and save CPU and network throttling for selected tabs.
- TracerBench
A controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
Automation
2_ENTRIES- Puppeteer IDE
Standalone Puppeteer playground in browser's developer tools.
- k6 browser
Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.
Alumni
6_ENTRIESOld projects, likely not maintained any longer⦠But still cool.
- Remote Debug Gateway
Allows you to connect a client to multiple browsers at once.Multiuser DevTools: DevTools Remote - Remotely debug someone else's browser.
- DevTools Backend
Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
- Python CDP driver
Python CDP driver: 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.