DOM Debug Collector

Alt-click the elements that look wrong, press one key, and the whole CSS context is on your clipboard. Paste it straight into an AI chat instead of explaining the layout problem in words.

The problem it solves

You have a button sitting 8 pixels too far left and you want to ask an AI why. So the description starts: "it is inside a flex container, I think, and there is a margin somewhere, and something inherits line-height from body". Half of that is guesswork, and the answer you get back is guesswork too.

The browser inspector knows all of this precisely. The problem is getting it out of there: you cannot select and copy a computed style list, and screenshots of devtools are useless to an AI that needs to read values. This script extracts what the inspector shows, as plain text, formatted to paste into a chat.

Installation

Requires Tampermonkey in Firefox or Chrome. Open the dashboard, create a new script, paste the whole file, save. It runs on every page, including local file:// pages.

Usage

If the keys clash with something else, there is a MODIFIER setting at the top of the file that switches to Super or Alt. All four commands are also in the Tampermonkey menu, so you can use them without keyboard shortcuts at all.

What a typical session looks like

Three clicks and one keystroke:

You Alt-click the button that sits wrong:
  📋 1 collected      Alt-click · Ctrl+Shift+D/F/G

You Alt-click the container around it, and the text beside it:
  📋 3 collected      Alt-click · Ctrl+Shift+D/F/G

You press Ctrl+Shift+F:
  ✓ Copied 3 × 5 levels

What lands on the clipboard

This is the format the script produces. Markdown, because that is what language models read best:

# DOM Debug Dump - 3 elements, 5 levels per element
# URL: https://example.com/products
# Time: 2026-08-05T12:34:56.789Z

## [1/3] a.btn.btn-primary

**Selected element:** `a.btn.btn-primary`

Outer HTML:
```html
<a href="/buy" class="btn btn-primary">Buy now</a>
```
CSS: `div#main > section.hero > div.cta > a.btn.btn-primary`
XPath: `/html[1]/body[1]/div[1]/section[2]/div[3]/a[1]`

Computed:
```
  display: inline-flex;
  position: relative;
  width: 148px;
  padding-left: 24px;
  margin-left: 8px;
  background-color: rgb(233, 180, 76);
  font-size: 16px;
  line-height: 24px;
```
Matched rules:
```css
/* from: template.css */
.btn {
  display: inline-flex;
  padding: 12px 24px;
}
/* from: bootstrap.min.css */
.btn-primary {
  background-color: #E9B44C;
  margin-left: 8px;
}
```

### ─── Parent 1 ───

**Ancestor:** `div.cta`
...

The important line is /* from: bootstrap.min.css */. It tells you which file the rule came from, which is exactly what you need when two stylesheets are fighting over the same element and you cannot tell who wins. Computed styles alone tell you what the result was, but not who decided it.

Details worth knowing

Why mousedown and not click

Firefox opens and closes <details> when you click a <summary>, and it does so before ordinary click listeners get to run. Alt-clicking a summary therefore felt like nothing happened, while the section simply snapped shut. The script listens on mousedown in the capture phase to get there first, and swallows the following click so the section does not flap open and closed.

The highlight uses both an outline and an inset shadow

An outline is drawn outside the element's border box, and a parent with overflow:hidden clips it away. You would then pick an element without seeing that it was picked. So the highlight is drawn twice: an outline outside and an inset box-shadow inside, so at least one of them is always visible.

Stylesheets from other domains cannot be read

The browser refuses to let JavaScript read cssRules from a stylesheet hosted on another domain without CORS headers. That covers fonts and CSS from a CDN, for instance. The script skips those silently and includes the rest, so "Matched rules" may be missing third-party rules. Computed styles are unaffected, since they come from the browser itself.

About v3

In the previous version the × button was broken. deactivate() tried to detach two listeners that had never been given names, which threw a ReferenceError: the badge stayed on screen and the keyboard shortcuts kept working. The reason is that removeEventListener needs the exact same function reference that addEventListener received, and an anonymous function can never be detached. In v3 both listeners are named, and detaching works.

Not maintained, change it yourself