CSS Inšpektor

Bilo da rješavate problem s izgledom stranice, proučavate dizajn koji vam se sviđa ili samo brzo provjeravate vrijednosti razmaka i tipografije, CSS Inspector vam pruža sve što trebate u čistom, plutajućem panelu. Za razliku od DevToolsa u pregledniku, ne stoji vam na putu — nema usidrenih panela, nema promjene veličine prikaza stranice. Samo prijeđite mišem, kliknite i pregledajte. Alat prikazuje izračunate stilove (computed styles) — ono što preglednik stvarno prikazuje, a ne samo napisani CSS. To znači da vidite stvarne vrijednosti nakon što su nasljeđivanje, specifičnost i kaskada razriješeni — iste vrijednosti koje utječu na ono što korisnici vide na ekranu.

Pregledavanje elementa nikada ne pokreće reflow ili repaint same stranice, pa možete slobodno istraživati bez brige da ćete poremetiti poziciju scrolla, animacije ili stanje JavaScripta. Podržani su i pseudo-elementi poput ::before i ::after — prijeđite mišem preko roditeljskog elementa i panel će prikazati stilove generiranog sadržaja odvojeno od stilova samog elementa. CSS custom properties (varijable) razrješavaju se u svoju konačnu izračunatu vrijednost, ali panel vam također prikazuje naziv varijable koja ju je proizvela, tako da boju ili vrijednost razmaka možete pratiti sve do njezinog izvora u dizajn-tokenima, umjesto da vidite samo goli broj u pikselima.

U svakodnevnoj upotrebi većina developera poseže za CSS Inspectorom desetke puta tijekom jedne sesije — provjeravajući zašto se margina sažela, potvrđujući hex kod prije nego što ga zalijepe u stylesheet, ili provjeravajući je li breakpoint media queryja stvarno primijenio stilove koji su bili predviđeni. Budući da je riječ o plutajućem panelu, a ne o načinu rada koji zauzima cijeli preglednik, možete ga držati otvorenim dok mijenjate kartice kako biste provjerili svoj kod u editoru ili dizajnersku datoteku, a zatim se odmah vratiti na isti element bez gubitka konteksta.