[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
×
@harrisonqian / Awesome / wiki/front-end-development/chrome-devtools.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Chrome DevTools **repo:** [ChromeDevTools/awesome-chrome-devtools](https://github.com/ChromeDevTools/awesome-chrome-devtools) **category:** [[front-end-development|Front-End Development]] **related:** [[javascript|Javascript]] · [[css|Css]] --- # Awesome Chrome DevTools [](https://awesome.re) > Awesome tooling and resources in the Chrome DevTools ecosystem ## Contents - [Learning](#learning) - [DevTools tooling and ecosystem](#devtools-tooling-and-ecosystem) - [Chrome DevTools Protocol](#chrome-devtools-protocol) - [Using DevTools frontend with other platforms](#using-devtools-frontend-with-other-platforms) - [Applications](#applications) - [DevTools Extensions](#devtools-extensions) - [Alumni](#alumni) --- ## Learning - [Dev Tips](https://umaar.com/dev-tips/) - Large collection of [tips](/@harrisonqian/awesome/wiki/programming-languages/tips) as animated gifs. - [DevTools Tips](https://devtoolstips.org/) - Collection of illustrated [tips](/@harrisonqian/awesome/wiki/programming-languages/tips) as mini [tutorials](/@harrisonqian/awesome/wiki/computer-science/tutorials). - [Can I DevTools?](https://www.canidev.tools/) - Various workflows, documented. Also a weekly [tips](/@harrisonqian/awesome/wiki/programming-languages/tips) & tricks [newsletter](https://canidevtools.substack.com/). - [Web cheatcodes](https://codepo8.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/web-cheatcodes/) - Browser developer tools for non-developers. - [Dear Console](https://codepo8.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/dearconsole) - A collection of snippets to use in the browser console. - [Chrome Secret Menus](https://github.com/sparkyrider/chrome-secret-menus) - Comprehensive guide to internal pages and diagnostic tools in Chrome. - [Front-end Debugging Tools Handbook](https://github.com/lala-hakobyan/front-end-debugging-handbook) - Practical guide to mastering front-end debugging tools, from Chrome DevTools and framework extensions to AI-enhanced IDE debugging. --- ## DevTools tooling and ecosystem ### Object formatting - [immutable-devtools](https://github.com/andrewdavey/immutable-devtools) - Custom formatter for Immutable-js values. ### Network Inspection - [betwixt](https://github.com/kdzwinel/betwixt) - System level network proxy, providing inspection via Network panel. ### CPU profile - [call-trace](https://github.com/brendankenny/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](https://github.com/thlorenz/cpuprofilify) - Converts output of various profiling/sampling tools to the `.cpuprofile` format. - [Wishbone [Python](/@harrisonqian/awesome/wiki/programming-languages/python) framework](https://wishbone.readthedocs.io/en/latest/misc/profiling.html) - Profiling data can export as `.cpuprofile`. ### Multimedia - [snapline](https://github.com/pmdartus/snapline) - Converts timeline screenshots to gif. ### Timeline, Tracing & Profiling - [DevTools Timeline Viewer](https://chromedevtools.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/timeline-viewer/) - Share URLs of your timeline recordings. ### Chrome Debugger integration with Editors - [VS Code - Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug/) - Breakpoint debugging in VS Code. - [VS Code - Elements for Microsoft Edge](https://github.com/microsoft/vscode-edge-devtools) - Elements panel inside VS Code. - [ChromeREPL](https://github.com/acarabott/ChromeREPL) - Within [Sublime Text](/@harrisonqian/awesome/wiki/editors/sublime-text), use the Chrome console. - [Sublime Web Inspector](http://sokolovstas.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/SublimeWebInspector/) - [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) Breakpoint debugging right in [Sublime Text](/@harrisonqian/awesome/wiki/editors/sublime-text). - [WebStorm/JetBrains Chrome Extension](https://www.jetbrains.com/help/webstorm/2017.1/configuring-[javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript)-debugger-and-jetbrains-chrome-extension.html) - The WebStorm IDE can debug [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript), view the DOM tree, and edit HTML, CSS and JS live. --- ## Chrome DevTools Protocol - [ChromeDevTools/devtools-protocol](https://github.com/chromedevtools/devtools-protocol) - **Canonical location of the protocol [JSON](/@harrisonqian/awesome/wiki/miscellaneous/json)**. Issue tracker for protocol bugs. TypeScript types. - [DevTools Protocol API Docs](https://chromedevtools.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/devtools-protocol/) - Easy browsable UI for exploring the protocol's domains, methods and events. ### Developing with the protocol - [chrome-remote-interface Wiki](https://github.com/cyrus-and/chrome-remote-interface/wiki) - Many useful recipes. - [Chrome Protocol Proxy](https://github.com/wendigo/chrome-protocol-proxy) - Tool for debugging clients using devtools protocol. ### The big two automation libraries - [Puppeteer](https://github.com/GoogleChrome/puppeteer/) - [Node.js](/@harrisonqian/awesome/wiki/platforms/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](https://github.com/microsoft/playwright) - Library to automate Chromium, Firefox and WebKit with a single API. Available for [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js), [Python](/@harrisonqian/awesome/wiki/programming-languages/python), .Net, [Java](/@harrisonqian/awesome/wiki/programming-languages/java). See also [awesome-playwright](https://github.com/mxschmitt/awesome-playwright). ### Libraries for driving the protocol (or a layer above) - JavaScript/[Node.js](/@harrisonqian/awesome/wiki/platforms/node-js): [chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface) - TypeScript/Node.js: [chrome-debugging-client](https://github.com/TracerBench/chrome-debugging-client) - TypeScript/Node.js: [noice-[json](/@harrisonqian/awesome/wiki/miscellaneous/json)-rpc](https://www.npmjs.com/package/noice-json-rpc) - A proxy-based implementation to expose the CDP as its API. - TypeScript/Node.js: [Taiko](https://github.com/getgauge/taiko/) - TypeScript/Node.js: [Lumen](https://github.com/omxyz/lumen) - Vision-first browser agent with self-healing deterministic replay over CDP. - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust): [Rust Headless Chrome](https://github.com/atroche/rust-headless-chrome/) - [Java](/@harrisonqian/awesome/wiki/programming-languages/java): [chrome-devtools-java-client](https://github.com/kklisura/chrome-devtools-java-client) - [Java](/@harrisonqian/awesome/wiki/programming-languages/java): [jvppeteer](https://github.com/fanyong920/jvppeteer) - Headless Chrome For Java - [Python](/@harrisonqian/awesome/wiki/programming-languages/python): [PyCDP](https://github.com/hyperiongray/python-chrome-devtools-protocol) - Pure-[Python](/@harrisonqian/awesome/wiki/programming-languages/python), sans-IO wrappers. See also the [Trio CDP driver](https://github.com/hyperiongray/trio-chrome-devtools-protocol) - [Python](/@harrisonqian/awesome/wiki/programming-languages/python): [chromewhip](https://github.com/chuckus/chromewhip) - drop-in replacement for the `splash` service - [Python](/@harrisonqian/awesome/wiki/programming-languages/python): [pyppeteer](https://github.com/pyppeteer/pyppeteer) - Puppeteer port - [Python](/@harrisonqian/awesome/wiki/programming-languages/python): [ChromeController](https://github.com/fake-name/ChromeController) - high-level browser mgmt - Go: [chromedp](https://github.com/chromedp/chromedp) - High-level actions and tasks for driving browsers - Go: [cdp](https://github.com/mafredri/cdp) - Go: [gcd](https://github.com/wirepair/gcd) - Go: [godet](https://github.com/raff/godet) - Go: [Rod](https://github.com/go-rod/rod) - C#/.NET: [Puppeteer Sharp](https://github.com/hardkoded/puppeteer-sharp) - Puppeteer port - C#/dotnet: [chrome-dev-tools](https://github.com/BaristaLabs/chrome-dev-tools) - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net [Core](/@harrisonqian/awesome/wiki/platforms/core) template. - C#/.NET: [dotnet-chrome-protocol](https://github.com/seclerp/dotnet-chrome-protocol) - A runtime library and schema code generation tools for Chrome DevTools Protocol support in C#/.NET. - [Ruby](/@harrisonqian/awesome/wiki/programming-languages/ruby): [Ferrum](https://github.com/route/ferrum) - high-level API to control Chrome in Ruby - [Ruby](/@harrisonqian/awesome/wiki/programming-languages/ruby): [Cuprite](https://github.com/machinio/cuprite) - Capybara driver - [Kotlin](/@harrisonqian/awesome/wiki/programming-languages/kotlin): [chrome-reactive-kotlin](https://github.com/wendigo/chrome-reactive-kotlin) - reactive (rxjava 2.x), low-level client library in [Kotlin](/@harrisonqian/awesome/wiki/programming-languages/kotlin) - [Kotlin](/@harrisonqian/awesome/wiki/programming-languages/kotlin): [chrome-devtools-kotlin](https://github.com/joffrey-bion/chrome-devtools-kotlin) - A coroutine-based client library, providing low-level CDP primitives and high-level extensions. - [Clojure](/@harrisonqian/awesome/wiki/programming-languages/clojure): [clj-chrome-devtools](https://github.com/tatut/clj-chrome-devtools) - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes. - [Clojure](/@harrisonqian/awesome/wiki/programming-languages/clojure): [cuic](https://github.com/milankinen/cuic) - Providing a high-level API for UI test automation over the DevTools Protocol. - PHP: [chrome-devtools-protocol](https://github.com/jakubkulhan/chrome-devtools-protocol) - A PHP client library for the protocol. - PHP: [PuPHPeteer](https://github.com/rialto-php/puphpeteer) - PHP bridge to node Puppeteer ### Browser Adapters - [devtools-remote-debugger](https://github.com/Nice-PLQ/devtools-remote-debugger) - Use devtools against a webpage; a CDP agent implemeted in client-side JS. - [Inspect](https://inspect.dev/) - Use devtools against iOS and [Android](/@harrisonqian/awesome/wiki/platforms/android), easily. Browser and Webviews. **(closed source)** ## Using DevTools frontend with other platforms #### Android - [Facebook Stetho](https://github.com/facebook/stetho) - Native [Android](/@harrisonqian/awesome/wiki/platforms/android) debugging with Chrome DevTools. - [j2v8-debugger](https://github.com/AlexTrotsenko/j2v8-debugger) - Debugging [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) running in [J2V8](https://github.com/eclipsesource/J2V8) with Chrome DevTools. #### ClojureScript - [Dirac](https://github.com/binaryage/dirac) - Debugging of ClojsureScript. #### iOS - [PonyDebugger](https://github.com/square/PonyDebugger) - Remote network and data debugging iOS [apps](/@harrisonqian/awesome/wiki/platforms/apps) with Chrome DevTools. #### Node.js - [ndb](https://github.com/GoogleChromeLabs/ndb) - An improved [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js) debugging experience with the DevTools Frontend. - [Debugging [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js) with Chrome DevTools](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27) - Guide on using the full debugging and profiling support in Node v6.3+. - [thetool](https://github.com/sfninja/thetool) - CPU, memory, coverage, type profiling with Node. - [chrome-devtools-frontend](https://www.npmjs.com/package/chrome-devtools-frontend) - Mirror of the frontend that ships in Chrome. #### Ruby - [ruby/debug](https://github.com/ruby/debug) - Debugging functionality for [Ruby](/@harrisonqian/awesome/wiki/programming-languages/ruby). --- ## Applications ### Browsers - [BrowserBox](https://github.com/BrowserBox/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](https://github.com/dosyago/puppetromium) - A proof-of-concept web browser built with Puppeteer, written in [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js), HTML and CSS, with 0% client-side [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript). ### Web Archivers and Indexers - [dn](https://github.com/dosyago/dn) - Archive and index pages you browse for offline viewing and search, implemented using the `Fetch` domain's interceptions, and works with any Chromium-based browser. --- ## DevTools Extensions ### Workflow - [Clockwork](https://chromewebstore.google.com/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp?hl=en) - View PHP application profiling data. - [RailsPanel](https://chromewebstore.google.com/detail/railspanel/gjpfobpafnhjhbajcjgccbbdofdckggg?hl=en-US) - View [Ruby](/@harrisonqian/awesome/wiki/programming-languages/ruby) on [Rails](/@harrisonqian/awesome/wiki/back-end-development/rails) application profiling data. - [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) - Inspect the [React](/@harrisonqian/awesome/wiki/front-end-development/react) component hierarchies. - [Ember.js Inspector](https://chromewebstore.google.com/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) - Allows you to inspect [Ember](/@harrisonqian/awesome/wiki/front-end-development/ember).js objects in your application. - [Vue.js Developer Tools](https://github.com/vuejs/vue-devtools) - Inspect [Vue.js](/@harrisonqian/awesome/wiki/front-end-development/vue-js) components and manipulate their data. - [Angular DevTools](https://chromewebstore.google.com/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) - Debugging and Profiling for [Angular](/@harrisonqian/awesome/wiki/front-end-development/angular) applications. - [Backbone Debugger](https://chromewebstore.google.com/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd) - Inspect a [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) application's views, models, events, and routes. - [Redux Devtools](https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) - Inspect [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux) with actions history, undo and replay. - [Insight](https://github.com/3Dparallax/insight/) - A [WebGL](/@harrisonqian/awesome/wiki/front-end-development/webgl) debugging toolkit which enables more productive [WebGL](/@harrisonqian/awesome/wiki/front-end-development/webgl) development and more efficient WebGL applications. - [BEM devtools](https://github.com/escaton/bem-chrome-devtools) - Inspect BEM entities expressed in `i-bem` framework. - [Web Component DevTools](https://chromewebstore.google.com/detail/web-component-devtools/gdniinfdlmmmjpnhgnkmfpffipenjljo) - Inspect, modify and observe [Web Components](/@harrisonqian/awesome/wiki/front-end-development/web-components) on page. ### Themes - [Material UI Theme](https://chromewebstore.google.com/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo) - Provides various [Material Design](/@harrisonqian/awesome/wiki/front-end-development/material-design) inspired themes. ### Performance - [sloth](https://github.com/denar90/sloth) - Chrome extension allows to enable and save CPU and network throttling for selected tabs. - [TracerBench](https://github.com/TracerBench/tracerbench) - A controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas. ### Automation - [Puppeteer IDE](https://github.com/gajananpp/puppeteer-ide-extension) - Standalone Puppeteer playground in browser's developer tools. - [k6 browser](https://github.com/grafana/xk6-browser) - Browser automation and end-to-end web [testing](/@harrisonqian/awesome/wiki/testing/testing) tool that interacts with browsers and collects frontend performance metrics. ## Alumni Old projects, likely not maintained any longer… But still cool. - [Remote Debug Gateway](https://github.com/RemoteDebug/remotedebug-gateway) - Allows you to connect a client to multiple browsers at once. - Multiuser DevTools: [DevTools Remote](https://github.com/auchenberg/devtools-remote) - Remotely debug someone else's browser. - [DevTools Backend](https://github.com/christian-bromann/devtools-backend) - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments. - [Python](/@harrisonqian/awesome/wiki/programming-languages/python) CDP driver: [pychrome](https://github.com/fate0/pychrome) - low level CDP transport handler - [ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy) - Exposes Mobile Safari & UIWebView instances via the CDP. - [Remote Debug iOS WebKit adapter](https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter) - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP. - [IE Diagnostics Adapter](https://github.com/Microsoft/IEDiagnosticsAdapter) - Protocol adaptor for Microsoft IE 11 to CDP. - [go-debugger-devtools](https://github.com/allada/go-debugger-devtools)