DOM Debug Collector

Alt-klikk på elementene som ser feil ut, trykk én tast, og hele CSS-konteksten ligger på utklippstavla. Lim den rett inn i en AI-chat i stedet for å forklare layoutproblemet med ord.

Problemet det løser

Du sitter med en knapp som ligger 8 piksler for langt til venstre, og du vil spørre en AI om hvorfor. Så begynner beskrivelsen: «den ligger inni en flex-container, tror jeg, og det er en margin et sted, og noe arver line-height fra body». Halvparten er gjetning, og svaret du får blir gjetning tilbake.

Nettleserens inspektør vet alt dette nøyaktig. Problemet er å få det ut derfra: du kan ikke merke og kopiere en beregnet stilliste, og skjermbilder av devtools er ubrukelige for en AI som skal lese verdier. Dette scriptet henter ut det inspektøren viser, som ren tekst, formatert for å limes inn i en chat.

Installasjon

Krever Tampermonkey i Firefox eller Chrome. Åpne dashbordet, lag et nytt script, lim inn hele fila, lagre. Scriptet kjører på alle sider, også lokale file://-sider.

Bruk

Kolliderer tastene med noe annet, står det en MODIFIER-innstilling øverst i fila som bytter til Super eller Alt. Alle fire kommandoene ligger også i Tampermonkey-menyen, så du kan bruke dem uten tastatursnarveier i det hele tatt.

Slik ser en typisk økt ut

Tre klikk og ett tastetrykk:

Du Alt-klikker knappen som ligger feil:
  📋 1 collected      Alt-click · Ctrl+Shift+D/F/G

Du Alt-klikker containeren rundt, og teksten ved siden av:
  📋 3 collected      Alt-click · Ctrl+Shift+D/F/G

Du trykker Ctrl+Shift+F:
  ✓ Copied 3 × 5 levels

Hva som havner på utklippstavla

Dette er formatet scriptet produserer. Markdown, fordi det er det språkmodeller leser best:

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

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

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

Outer HTML:
```html
<a href="/kjop" class="btn btn-primary">Kjøp nå</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`
...

Det viktige er linja /* from: bootstrap.min.css */. Den forteller deg hvilken fil regelen kom fra, som er akkurat det du trenger når to stilark kjemper om samme element og du ikke vet hvem som vinner. Beregnede stiler alene sier hva resultatet ble, men ikke hvem som bestemte det.

Detaljer som er verdt å vite

Hvorfor mousedown og ikke click

Firefox åpner og lukker <details> når du klikker på <summary>, og den gjør det før vanlige klikklyttere rekker å kjøre. Alt-klikk på en summary føltes derfor som at ingenting skjedde, mens seksjonen bare klappet igjen. Scriptet lytter på mousedown i capture-fasen for å komme først, og svelger det påfølgende klikket så seksjonen ikke blafrer.

Markeringen bruker både outline og innvendig skygge

En outline tegnes utenfor elementets kant, og en forelder med overflow:hidden klipper den bort. Da plukket du et element uten å se at det ble plukket. Derfor tegnes markeringen to ganger: en outline utenfor og en inset box-shadow innenfor, slik at minst én av dem alltid er synlig.

Stilark fra andre domener kan ikke leses

Nettleseren nekter JavaScript å lese cssRules fra et stilark som ligger på et annet domene uten CORS-headere. Det gjelder for eksempel fonter og CSS fra et CDN. Scriptet hopper stilltiende over dem og tar med resten, så «Matched rules» kan mangle regler fra tredjepart. Beregnede stiler er upåvirket, for de kommer fra nettleseren selv.

Om v3

I forrige versjon var × -knappen ødelagt. deactivate() forsøkte å koble fra to lyttere som aldri hadde fått navn, noe som ga en ReferenceError: merket ble stående, og tastatursnarveiene fortsatte å virke. Grunnen er at removeEventListener må få nøyaktig samme funksjonsreferanse som addEventListener fikk, og en anonym funksjon kan aldri kobles fra igjen. I v3 har begge lytterne navn, og frakoblingen virker.

Vedlikeholdes ikke, endre den selv