Awesome tooling and resources in the Chrome DevTools ecosystem
- Learning
- DevTools tooling and ecosystem
- Chrome DevTools Protocol
- Using DevTools frontend with other platforms
- DevTools Extensions
- Alumni
- 🌎 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.
658⭐
36🍴
immutable-devtools) - Custom formatter for Immutable-js values.
4521⭐
124🍴
betwixt) - System level network proxy, providing inspection via Network panel.- 🌎 Weer - A HTTP protocol debugger (closed source)
32⭐
9🍴
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.167⭐
16🍴
cpuprofilify) - Converts output of various profiling/sampling tools to the.cpuprofile
format.- 🌎 Wishbone python framework - Profiling data can export as
.cpuprofile
.
393⭐
17🍴
snapline) - Converts timeline screenshots to gif.
- 🌎 DevTools Timeline Viewer - Share URLs of your timeline recordings.
?⭐
?🍴
VS Code - Debugger for Chrome) - Breakpoint debugging in VS Code.725⭐
239🍴
VS Code - Elements for Microsoft Edge) - Elements panel inside VS Code.355⭐
11🍴
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.
1056⭐
219🍴
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.
?⭐
?🍴
chrome-remote-interface Wiki) - Many useful recipes.172⭐
26🍴
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. See also2312⭐
155🍴
awesome-puppeteer).61331⭐
3259🍴
Playwright) - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also677⭐
73🍴
awesome-playwright).
- JavaScript/Node.js:
4185⭐
299🍴
chrome-remote-interface) - TypeScript/Node.js:
130⭐
19🍴
chrome-debugging-client) - Typescript/Node.js: 🌎 noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
- Typescript/Node.js:
?⭐
?🍴
Taiko) - Rust:
?⭐
?🍴
Rust Headless Chrome) - Java:
206⭐
70🍴
chrome-devtools-java-client) - Java:
656⭐
150🍴
jvppeteer) - Headless Chrome For Java - Python:
79⭐
21🍴
PyCDP) - Pure-Python, sans-IO wrappers. See also the56⭐
17🍴
Trio CDP driver) - Python:
115⭐
16🍴
chromewhip) - drop-in replacement for thesplash
service - Python:
3386⭐
312🍴
pyppeteer) - puppeteer port - Python:
209⭐
29🍴
ChromeController) - high-level browser mgmt - Go:
10320⭐
761🍴
chromedp) - High-level actions and tasks for driving browsers - Go:
715⭐
48🍴
cdp) - Go:
184⭐
31🍴
gcd) - Go:
392⭐
44🍴
godet) - Go:
4727⭐
315🍴
Rod) - C#/.NET:
3138⭐
419🍴
Puppeteer Sharp) - puppeteer port - C#/dotnet:
75⭐
27🍴
chrome-dev-tools) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template. - Ruby:
1641⭐
117🍴
Ferrum) - high-level API to control Chrome in Ruby - Ruby:
1193⭐
89🍴
Cuprite) - Capybara driver - Kotlin:
75⭐
12🍴
chrome-reactive-kotlin) - reactive (rxjava 2.x), low-level client library in Kotlin - Kotlin:
41⭐
7🍴
chrome-devtools-kotlin) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions. - Clojure:
128⭐
19🍴
clj-chrome-devtools) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes. - Clojure:
34⭐
4🍴
cuic) - Providing a high-level API for UI test automation over the DevTools Protocol. - PHP:
166⭐
50🍴
chrome-devtools-protocol) - A PHP client library for the protocol. - PHP:
1340⭐
187🍴
PuPHPeteer) - php bridge to node puppeteer
- 🌎 Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)
12667⭐
1126🍴
Facebook Stetho) - Native Android debugging with Chrome DevTools.87⭐
24🍴
j2v8-debugger) - Debugging JavaScript running in2488⭐
352🍴
J2V8) with Chrome DevTools.
767⭐
30🍴
Dirac) - Debugging of ClojsureScript.
5868⭐
593🍴
PonyDebugger) - Remote network and data debugging iOS apps with Chrome DevTools.
10910⭐
230🍴
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+.
217⭐
5🍴
thetool) - CPU, memory, coverage, type profiling with Node.- 🌎 chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
1071⭐
121🍴
ruby/debug) - Debugging functionality for Ruby.
- 🌎 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.
- 🌎 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.
24307⭐
4100🍴
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.44⭐
4🍴
BEM devtools) - Inspect BEM entities expressed ini-bem
framework.- 🌎 Metal.js Developer Tools - Inspect the Metal component hierarchies.
- 🌎 Web Component DevTools - Inspect, modify and observe Web Components on page.
- 🌎 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.
196⭐
11🍴
sloth) - Chrome extension allows to enable and save CPU and network throttling for selected tabs.237⭐
31🍴
TracerBench) - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
184⭐
17🍴
Puppeteer IDE) - Standalone Puppeteer playground in browser's developer tools.
Old projects, likely not maintained any longer… But still cool.
91⭐
10🍴
Remote Debug Gateway) - Allows you to connect a client to multiple browsers at once.- Multiuser DevTools:
679⭐
40🍴
DevTools Remote) - Remotely debug someone else's browser.
- Multiuser DevTools:
141⭐
23🍴
DevTools Backend) - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.- Python CDP driver:
586⭐
108🍴
pychrome) - low level CDP transport handler 5861⭐
459🍴
ios-webkit-debug-proxy) - Exposes Mobile Safari & UIWebView instances via the CDP.2710⭐
218🍴
Remote Debug iOS WebKit adapter) - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
573⭐
49🍴
IE Diagnostics Adapter) - Protocol adaptor for Microsoft IE 11 to CDP.42⭐
2🍴
go-debugger-devtools)
5837⭐
340🍴
ChromeDevTools/awesome-chrome-devtools)