CSS Inspector

Uanset om du fejlsøger et layoutproblem, reverse-engineerer et design, du beundrer, eller hurtigt vil tjekke afstands- og typografiværdier, giver CSS Inspector dig alt, hvad du har brug for, i et rent, flydende panel. I modsætning til browserens DevTools er værktøjet ikke i vejen — ingen dockede paneler, ingen ændret viewport-størrelse. Du skal blot holde musen over, klikke og inspicere. Værktøjet viser beregnede stilarter (computed styles) — altså det, browseren faktisk renderer — og ikke bare den CSS, der er skrevet i koden. Det betyder, at du ser de reelle værdier, efter arv, specificitet og cascading er blevet løst — de samme værdier, der afgør, hvad brugerne rent faktisk ser på skærmen.

At inspicere et element udløser aldrig en reflow eller repaint af selve siden, så du kan udforske frit uden at bekymre dig om at forstyrre scrollposition, animationer eller JavaScript-tilstand. Pseudo-elementer som ::before og ::after understøttes også — hold musen over det overordnede element, så viser panelet det genererede indholds stilarter adskilt fra elementets egne. CSS-brugerdefinerede egenskaber (variabler) opløses til deres endelige beregnede værdi, men panelet viser dig også variabelnavnet, der genererede den, så du kan spore en farve- eller afstandsværdi tilbage til dens design-token-kilde i stedet for blot at se et råt pixeltal.

I det daglige arbejde griber de fleste udviklere til CSS Inspector adskillige gange i løbet af en session — for at tjekke, hvorfor en margin kollapsede, bekræfte en hex-kode, før den kopieres ind i et stylesheet, eller verificere, at et media query-breakpoint rent faktisk anvendte de tiltænkte stilarter. Fordi det er et flydende panel snarere end en browserdækkende tilstand, kan du holde det åbent, mens du skifter fane for at tjekke din egen kodeeditor eller en designfil, og derefter vende direkte tilbage til det samme element uden at miste dit sted.