CSS Inspector

Oavsett om du felsöker ett layoutproblem, reverse-engineerar en design du beundrar, eller snabbt vill kontrollera avstånds- och typografivärden, ger CSS Inspector dig allt du behöver i en ren, flytande panel. Till skillnad från webbläsarens DevTools är den aldrig i vägen — inga fastdockade paneler, ingen omstorlekad viewport. Bara hovra, klicka och inspektera. Verktyget visar beräknade stilar (computed styles) — det vill säga vad webbläsaren faktiskt renderar, inte bara den CSS som skrevs. Det innebär att du ser de verkliga värdena efter att arv, specificitet och cascading har lösts upp — samma värden som avgör vad användarna ser på skärmen.

Att inspektera ett element utlöser aldrig en reflow eller repaint av själva sidan, så du kan utforska fritt utan att oroa dig för att rubba scrollposition, animationer eller JavaScript-tillstånd. Pseudo-element som ::before och ::after stöds också — hovra över föräldraelementet så visar panelen det genererade innehållets stilar separat från elementets egna. CSS custom properties (variabler) löses upp till sitt slutgiltiga beräknade värde, men panelen visar även variabelnamnet som gav upphov till det, så att du kan spåra ett färg- eller avståndsvärde tillbaka till dess design-token-källa istället för att bara se ett rått pixelvärde.

I det dagliga arbetet använder de flesta utvecklare CSS Inspector dussintals gånger per session — för att kontrollera varför en margin kollapsade, bekräfta en hex-kod innan den kopieras in i ett stylesheet, eller verifiera att en media query-brytpunkt verkligen tillämpade de stilar den skulle. Eftersom det är en flytande panel snarare än ett webbläsaromfattande läge kan du hålla den öppen medan du växlar flik för att kolla din egen kodredigerare eller en designfil, och sedan komma tillbaka direkt till samma hovrade element utan att tappa bort dig.