chromedevtools / awesome-chrome-devtools

Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem

Awesome Chrome DevTools

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents

• Learning
• DevTools tooling and ecosystem
• Chrome DevTools Protocol
• Using DevTools frontend with other platforms
• DevTools Extensions
• Alumni

---

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.
• Web cheatcodes - Browser developer tools for non-developers.
• Dear Console - A collection of snippets to use in the browser console.

---

DevTools tooling and ecosystem

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)

CPU profile

• 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.
• Wishbone python framework - Profiling data can export as .cpuprofile.

Multimedia

• snapline - Converts timeline screenshots to gif.

Timeline, Tracing & Profiling

• DevTools Timeline Viewer - Share URLs of your timeline recordings.

Chrome Debugger integration with Editors

• 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

• 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

• 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.
• 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)

• JavaScript/Node.js: chrome-remote-interface
• TypeScript/Node.js: 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: chrome-devtools-java-client
• Java: jvppeteer - Headless Chrome For Java
• Python: PyCDP - Pure-Python, sans-IO wrappers. See also the Trio CDP driver
• Python: chromewhip - drop-in replacement for the splash service
• Python: pyppeteer - puppeteer port
• Python: ChromeController - high-level browser mgmt
• Go: chromedp - High-level actions and tasks for driving browsers
• Go: cdp
• Go: gcd
• Go: godet
• Go: Rod
• C#/.NET: Puppeteer Sharp - puppeteer port
• C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
• Ruby: Ferrum - high-level API to control Chrome in Ruby
• Ruby: Cuprite - Capybara driver
• Kotlin: chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
• Kotlin: chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
• Clojure: clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
• Clojure: cuic - Providing a high-level API for UI test automation over the DevTools Protocol.
• PHP: chrome-devtools-protocol - A PHP client library for the protocol.
• PHP: PuPHPeteer - php bridge to node puppeteer

Browser Adapters

• 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)

Using DevTools frontend with other platforms

Android

• Facebook Stetho - Native Android debugging with Chrome DevTools.
• j2v8-debugger - Debugging JavaScript running in J2V8 with Chrome DevTools.

ClojureScript

• Dirac - Debugging of ClojsureScript.

iOS

• PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.

Node.js

• 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

• 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.
• 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.
• 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.
• BEM devtools - Inspect BEM entities expressed in i-bem framework.
• Metal.js Developer Tools - Inspect the Metal component hierarchies.
• Web Component DevTools - Inspect, modify and observe Web Components on page.

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

Old 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: 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

awesome-chrome-devtools's Issues

Възстановяване на акаунт

Icon meaning in front of the HTTP status code

[Http status code icon]
When we open the developer tool, we can see that there are some icons in front of the http status code in the network panel. For example, there are green solid circles and gray hollow circles in front of 200.
I am wondering why there are multiple icons for the same status code. What do they mean?
I am sorry to ask you for help here, I really need help. Thank you

Where can I find some detailed information about the "rendering" dev tool?

I'm interested in developing a tool(extension or dev tool) which can detect the dom update (dom painting), similar to the "rendering" chrome dev tool.
I'm new to chome development, and not sure where can I get the document I need.

Thanks.
Jake

Animation tab

---

Code of Conduct contact

The contact in the CoC is [email protected]. We should change this, unless he wants to get all of our reports?

Rename repo?

Since it is under the ChromeDevTools org we could just call it awesome. That would net us the beautiful https://github.com/ChromeDevTools/awesome URL. ;)

Chrome

Protocol driver libraries (in various languages) should have clojure

There is a clj-chrome-devtools belongs this catogory.

_

_

Broken link in contributing.md

"you're not sure how to do that, here is a guide on the different ways you can update your PR so that we can merge it."

Here is a guide link is broken: https://github.com/RichardLitt/docs/blob/master/amending-a-commit-guide.md

Comparing performance profiles or ways to measure perf diff of specific changes(CSS)?

I've used WebPageTest on two versions of a website, the difference being the use of the blur filter in CSS on a web page full of images to apply it to.

It's not clear how to identify where these specific changes are occurring in all the profile data(presumably paint events and perhaps GPU). Maybe with several runs for each I'd have some way to compare the averaged profile data to try identify those areas?(I don't think there's a way to query the actual CSS/filter being applied?)

I'm trying to get a PR approved for a project where they raise concerns about blur filters history from over half a decade a go where many articles cited big hits to CPU and battery life on mobile devices.I don't think that is the case anymore, but I'm not able to identify where the relevant profile data is to point them to.

Are there any tools in Chrome for this? I know there used to be some dev tool support that old articles wrote about, but it's since been removed.

ChromiumHtmlToPdf C#

Just a simple package to convert HTML to PDF or PNG with the use of Chromium from C#

https://github.com/Sicos1977/ChromiumHtmlToPdf

Sorry, I'm not sure where to put this project...

I'm serving DevTools frontend out of my own site to instrument remote headless browsers. I had a good long look at the sections in the README but don't know where I would fit in. I'm sure you people here will know best where to put it, but if you don't want to include it that's OK too, everyone likes different things.

[Puppeteer Console](https://pptrconsole.com) - Serving DevTools front-end (for headless cloud browsers) everywhere since 2021

Listen to multiple selections of the same element in the elements panel

In my Google Chrome DevTools Extension I try to listen to the selections in the DevTools panel "Elements". In particular, it should be possible to listen to the selection of the already selected element.

My current implementation method revolves around the function chrome.devtools.panels.elements.onSelectionChanged. The function name already suggests that it is only possible to react to elements that are not currently selected.
Therefore I tried to reset or remove the current selection with the help variable $0, to be able to listen to the same element again - unfortunately without success.

My goal is to somehow listen to every click/selection in the elements panel. In summary, I am looking for an onSelection listener instead of an onSelectonChange listener.

Here's my code I've tried:

chrome.devtools.panels.elements.createSidebarPane(
    "Selector",
    function(sidebar) {
        // It fires if I'm selecting a specific DOM element via the elements panel the first time
        // It won't fire if I'm selecting the same DOM element again
        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
            chrome.devtools.inspectedWindow.eval(`(${getSelector})()`,
            selector => {
                console.log(selector)
                // Here I tried to reset the current selection...
                // I've already debugged it: I can assign a value to $0, 
                // but this implies that the value remains constant even 
                // after a new selection.
                chrome.devtools.inspectedWindow.eval('$0 = undefined')
            })
        })
    }
)

I am wondering if there is a way to change the selector programmatically...

Performance Section

Are you folks up for a perf section? spof-o-matic is immediately coming to my mind. :)

add projects: fate0/pychrome, marty90/PyChromeDevTools, MasterDevs/ChromeDevTools

https://github.com/fate0/pychrome
A Python Package for the Google Chrome Dev Protocol
fresh = 2023

https://github.com/marty90/PyChromeDevTools
PyChromeDevTools is a python module that allows one to interact with Google Chrome using Chrome DevTools Protocol within a Python script.
fresh = 2023

https://github.com/MasterDevs/ChromeDevTools
.NET library to interact with the Chrome Debugger
old = 2018

Capture Console?

Beginner question:

Is it possible to capture all chrome console messages using javascript?
This would be a stand-alone chrome browser, not headless.
Running inside the same browser-instance-- not a client/remote browser.

What's the simplest, most lightweight solution?

thx!

Add devtoolsecrets.com website ?

Do you thing it's worth adding http://devtoolsecrets.com?
Why this interrogation? Because this is not only about Chrome but all browsers debuggers.
Depending on feedback, I will submit it after discussion where to insert the content.

Devtools cpuprofile parser

Hi,

I've just been looking through your very useful list of tools, I'm just wondering though,
if you've ever come across something to process a cpuprofile file from devtools?

I mean a script that loads the same JSON format as is saved by the Profile tab of devtools and is capable of generating Start time, Self time, Total time, for specific function calls from the cpuprofile file (data which you can normally see in the Event Log of the Profile tab).

Cheers!

A confusion about html parsing in chrome devtools timeline

Hi Paul
Thanks for the tips for using chrome devtools, it offers a great help.
Recently I‘v using the timeline to check my page, I found something confused, I use <script type="text/template"> </script> to hold my underscore template, I found in timeline that it would stop the process of parse Html and trigger recalculate style and layout , in the real browser working process does it really working in that way and too many <script type="text/template"> tags in html affect the performance?

my page is: https://ai.m.taobao.com/
and things happened in line 250 or so

RemoteDebug MDNS Spec

I wanted to get peoples thoughts on: https://github.com/RemoteDebug/remotedebug-mdns-spec

It would be nice to provide a standard way for mdns to interact with remote debuggers.

I didn't submit a pull request because I'm not sure if it's a good thing for the list.

Add Reason of "Recalculate Style"

Hi, thank you for great devtools!

It would be nice to have information about what exact Elements and CSS Properties has been modified and become reason of "Recalculate Style" process

This will provide fine grade performance investigation experience)

Devtools Cheatsheet?

May I suggest an addition to this list, my devtools cheatsheet!
https://github.com/jaredwilli/devtools-cheatsheet

question. script copying an element on the site page

Greetings. Is it possible to copy the value of an element on a site page to the clipboard?

There is a page element:

How to copy the script to the buffer "345"?

Add pyppeteer and puppeteer-sharp

Could you add these libraries? ;)

• https://github.com/miyakogi/pyppeteer
• https://github.com/kblok/puppeteer-sharp

Is there any backend library?

I want to build a tool to debug scripts that run on my phone remotely.

Right now I am using nodejs as a proxy. My mobile APP sends all logs to nodejs then nodejs echo them with console.log() method so that I could inspect logs using Chrome Devtools Inspector with command node index.js --inspect.

But If I want to send command from Chrome Devtoos back to my app, the proxy way will not be able to do that because I can't get that input.

So is there any library that implement Chrome Devtools Protocol backend can help me with my tools.

I tried to find but all of the libraries are frontend like Chrome Devtools.

Debug

DevTools Remote link is broken

https://devtoolsremote.com/ seems to be down.