CSS Inspector

Enten du feilsøker et layoutproblem, reverse-engineerer et design du beundrer, eller raskt vil sjekke avstands- og typografiverdier, gir CSS Inspector deg alt du trenger i et ryddig, flytende panel. I motsetning til nettleserens DevTools er den ikke i veien — ingen forankrede paneler, ingen endret vindusstørrelse. Bare hold musepekeren over, klikk, og inspiser. Verktøyet viser computed styles (det nettleseren faktisk rendrer), ikke bare den opprinnelige CSS-en. Det betyr at du ser de reelle verdiene etter at arv, spesifisitet og cascading er løst opp — de samme verdiene som avgjør hva brukerne ser på skjermen.

Å inspisere et element utløser aldri en reflow eller repaint av selve siden, så du kan utforske fritt uten å bekymre deg for å forstyrre scrollposisjon, animasjoner eller JavaScript-tilstand. Pseudo-elementer som ::before og ::after støttes også — hold musepekeren over det overordnede elementet, så viser panelet stilene til det genererte innholdet separat fra elementets egne. CSS custom properties (variabler) løses opp til sin endelige beregnede verdi, men panelet viser deg også variabelnavnet som produserte den, slik at du kan spore en farge- eller avstandsverdi tilbake til design-token-kilden i stedet for bare å se et rått pikseltall.

I daglig bruk griper de fleste utviklere til CSS Inspector dusinvis av ganger per økt — for å sjekke hvorfor en margin kollapset, bekrefte en hex-kode før den kopieres inn i et stilark, eller verifisere at et media query-brytepunkt faktisk brukte stilene det skulle. Fordi det er et flytende panel og ikke en nettleserdekkende modus, kan du la det stå åpent mens du bytter faner for å sjekke din egen kodeeditor eller en designfil, og komme rett tilbake til det samme elementet uten å miste oversikten.