CSS Inspektors

Neatkarīgi no tā, vai jūs atkļūdojat izkārtojuma problēmu, izpētāt dizainu, kas jums patīk, vai vienkārši ātri pārbaudāt atstarpju un tipogrāfijas vērtības, CSS Inspektors sniedz visu nepieciešamo pārskatāmā, peldošā panelī. Atšķirībā no pārlūka DevTools, tas netraucē jūsu darbam — nav piesietu paneļu, nav mainīta skata izmēra. Vienkārši uzbraucat ar kursoru, uzklikšķiniet un pārbaudiet. Rīks parāda aprēķinātos stilus (to, ko pārlūks patiešām atveido), nevis tikai rakstīto CSS. Tas nozīmē, ka jūs redzat reālās vērtības pēc mantojuma, specifiskuma un kaskādes izšķiršanas — tās pašas vērtības, kas ietekmē to, ko lietotāji redz ekrānā.

Elementa pārbaude nekad neizraisa lapas pārplūdi (reflow) vai atkārtotu zīmēšanu, tāpēc varat brīvi pētīt, neuztraucoties par ritināšanas pozīcijas, animāciju vai JavaScript stāvokļa izjaukšanu. Tiek atbalstīti arī tādi pseidoelementi kā ::before un ::after — uzbraucat ar kursoru virs vecākelementa, un panelis parāda ģenerētā satura stilus atsevišķi no paša elementa stiliem. CSS pielāgotie mainīgie (variables) tiek atrisināti līdz to galīgajai aprēķinātajai vērtībai, taču panelis parāda arī mainīgā nosaukumu, kas šo vērtību radījis, tāpēc varat izsekot krāsu vai atstarpes vērtību atpakaļ līdz tās dizaina marķiera avotam, nevis redzēt tikai neapstrādātu pikseļu skaitli.

Ikdienas lietošanā lielākā daļa izstrādātāju atver CSS Inspektoru vairākas desmitas reižu vienā sesijā — pārbaudot, kāpēc sabruka mala (margin), pārliecinoties par heksadecimālo kodu pirms tā kopēšanas stila lapā vai apstiprinot, ka mediju vaicājuma pārtraukumpunkts patiešām piemēroja paredzētos stilus. Tā kā tas ir peldošs panelis, nevis pārlūka mēroga režīms, varat to atstāt atvērtu, kamēr pārslēdzaties uz citām cilnēm, lai pārbaudītu savu koda redaktoru vai dizaina failu, un tad atgriezties tieši pie tā paša izcelā elementa, nezaudējot savu vietu.