DOM Debug Collector

Alt-klikk på elementa som ser feil ut, trykk éin tast, og heile CSS-konteksten ligg på utklippstavla. Lim henne rett inn i ein AI-chat i staden for å forklare layoutproblemet med ord.

Problemet det løyser

Du sit med ein knapp som ligg 8 pikslar for langt til venstre, og du vil spørje ein AI om kvifor. Så byrjar skildringa: «han ligg inni ein flex-container, trur eg, og det er ein margin ein stad, og noko arvar line-height frå body». Halvparten er gjetting, og svaret du får blir gjetting tilbake.

Inspektøren i nettlesaren veit alt dette nøyaktig. Problemet er å få det ut derifrå: du kan ikkje merke og kopiere ei berekna stilliste, og skjermbilete av devtools er ubrukelege for ein AI som skal lese verdiar. Dette scriptet hentar ut det inspektøren viser, som rein tekst, formatert for å limast inn i ein chat.

Installasjon

Krev Tampermonkey i Firefox eller Chrome. Opne dashbordet, lag eit nytt script, lim inn heile fila, lagre. Scriptet køyrer på alle sider, òg lokale file://-sider.

Bruk

Kolliderer tastane med noko anna, står det ei MODIFIER-innstilling øvst i fila som byter til Super eller Alt. Alle fire kommandoane ligg òg i Tampermonkey-menyen, så du kan bruke dei utan tastatursnarvegar i det heile.

Slik ser ei typisk økt ut

Tre klikk og eitt tastetrykk:

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

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

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

Kva som hamnar på utklippstavla

Dette er formatet scriptet lagar. Markdown, fordi det er det språkmodellar les 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 no</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 */. Ho fortel deg kva for fil regelen kom frå, som er akkurat det du treng når to stilark kjempar om same element og du ikkje veit kven som vinn. Berekna stilar åleine seier kva resultatet blei, men ikkje kven som bestemte det.

Detaljar som er verdt å vite

Kvifor mousedown og ikkje click

Firefox opnar og lukkar <details> når du klikkar på <summary>, og han gjer det før vanlege klikklyttarar rekk å køyre. Alt-klikk på ein summary kjendest difor som at ingenting skjedde, medan seksjonen berre klappa att. Scriptet lyttar på mousedown i capture-fasen for å komme først, og svelgjer det påfølgjande klikket så seksjonen ikkje blafrar.

Markeringa bruker både outline og innvendig skugge

Ein outline blir teikna utanfor kanten på elementet, og ein forelder med overflow:hidden klipper han bort. Då plukka du eit element utan å sjå at det blei plukka. Difor blir markeringa teikna to gonger: ein outline utanfor og ein inset box-shadow innanfor, slik at minst éin av dei alltid er synleg.

Stilark frå andre domene kan ikkje lesast

Nettlesaren nektar JavaScript å lese cssRules frå eit stilark som ligg på eit anna domene utan CORS-headarar. Det gjeld til dømes fontar og CSS frå eit CDN. Scriptet hoppar stille over dei og tek med resten, så «Matched rules» kan mangle reglar frå tredjepart. Berekna stilar er upåverka, for dei kjem frå nettlesaren sjølv.

Om v3

I førre versjon var × -knappen øydelagd. deactivate() prøvde å kople frå to lyttarar som aldri hadde fått namn, noko som gav ein ReferenceError: merket blei ståande, og tastatursnarvegane heldt fram med å verke. Grunnen er at removeEventListener må få nøyaktig same funksjonsreferanse som addEventListener fekk, og ein anonym funksjon kan aldri koplast frå igjen. I v3 har begge lyttarane namn, og frakoplinga verkar.

Blir ikkje vedlikehalde, endre det sjølv