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.
661⭐
29🍴
immutable-devtools) - Custom formatter for Immutable-js values.
4530⭐
125🍴
betwixt) - System level network proxy, providing inspection via Network panel.- 🌎 Weer - A HTTP protocol debugger (closed source)
36⭐
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.744⭐
249🍴
VS Code - Elements for Microsoft Edge) - Elements panel inside VS Code.354⭐
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.
1114⭐
225🍴
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.186⭐
28🍴
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 also2382⭐
160🍴
awesome-puppeteer).65342⭐
3552🍴
Playwright) - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also857⭐
88🍴
awesome-playwright).
- JavaScript/Node.js:
4253⭐
304🍴
chrome-remote-interface) - TypeScript/Node.js:
134⭐
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:
217⭐
73🍴
chrome-devtools-java-client) - Java:
694⭐
156🍴
jvppeteer) - Headless Chrome For Java - Python:
95⭐
22🍴
PyCDP) - Pure-Python, sans-IO wrappers. See also the62⭐
18🍴
Trio CDP driver) - Python:
118⭐
16🍴
chromewhip) - drop-in replacement for thesplash
service - Python:
3598⭐
323🍴
pyppeteer) - puppeteer port - Python:
214⭐
27🍴
ChromeController) - high-level browser mgmt - Go:
10799⭐
782🍴
chromedp) - High-level actions and tasks for driving browsers - Go:
721⭐
46🍴
cdp) - Go:
184⭐
31🍴
gcd) - Go:
389⭐
45🍴
godet) - Go:
5181⭐
341🍴
Rod) - C#/.NET:
3321⭐
439🍴
Puppeteer Sharp) - puppeteer port - C#/dotnet:
77⭐
27🍴
chrome-dev-tools) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template. - Ruby:
1706⭐
123🍴
Ferrum) - high-level API to control Chrome in Ruby - Ruby:
1234⭐
93🍴
Cuprite) - Capybara driver - Kotlin:
75⭐
11🍴
chrome-reactive-kotlin) - reactive (rxjava 2.x), low-level client library in Kotlin - Kotlin:
44⭐
7🍴
chrome-devtools-kotlin) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions. - Clojure:
130⭐
21🍴
clj-chrome-devtools) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes. - Clojure:
36⭐
4🍴
cuic) - Providing a high-level API for UI test automation over the DevTools Protocol. - PHP:
170⭐
50🍴
chrome-devtools-protocol) - A PHP client library for the protocol. - PHP:
1340⭐
205🍴
PuPHPeteer) - php bridge to node puppeteer
279⭐
42🍴
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)
12661⭐
1127🍴
Facebook Stetho) - Native Android debugging with Chrome DevTools.87⭐
24🍴
j2v8-debugger) - Debugging JavaScript running in2535⭐
356🍴
J2V8) with Chrome DevTools.
769⭐
30🍴
Dirac) - Debugging of ClojsureScript.
5866⭐
595🍴
PonyDebugger) - Remote network and data debugging iOS apps with Chrome DevTools.
10906⭐
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+.
220⭐
6🍴
thetool) - CPU, memory, coverage, type profiling with Node.- 🌎 chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
1116⭐
122🍴
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.
24599⭐
4141🍴
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.45⭐
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.240⭐
31🍴
TracerBench) - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
203⭐
20🍴
Puppeteer IDE) - Standalone Puppeteer playground in browser's developer tools.336⭐
42🍴
k6 browser) - Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.
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:
686⭐
40🍴
DevTools Remote) - Remotely debug someone else's browser.
- Multiuser DevTools:
143⭐
23🍴
DevTools Backend) - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.- Python CDP driver:
604⭐
112🍴
pychrome) - low level CDP transport handler 5918⭐
462🍴
ios-webkit-debug-proxy) - Exposes Mobile Safari & UIWebView instances via the CDP.2720⭐
219🍴
Remote Debug iOS WebKit adapter) - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
575⭐
41🍴
IE Diagnostics Adapter) - Protocol adaptor for Microsoft IE 11 to CDP.42⭐
2🍴
go-debugger-devtools)
6024⭐
345🍴
ChromeDevTools/awesome-chrome-devtools)