CSS Инспектор

Без обзира да ли отклањате грешку у распореду, обрнутим инжењерингом анализирате дизајн који вам се допада или само брзо проверавате вредности размака и типографије, CSS Инспектор вам пружа све што вам је потребно у прегледном, плутајућем панелу. За разлику од уграђених DevTools-а прегледача, овај алат вам не смета — нема прикачених панела, нема смањивања приказа странице. Само пређите курсором, кликните и прегледајте. Алат приказује рачунате (computed) стилове — оно што прегледач заиста рендерује — а не само стилове онако како су написани у CSS-у. То значи да видите праве вредности након што су наслеђивање, специфичност и каскадирање разрешени — исте оне вредности које утичу на оно што корисници заправо виде на екрану.

Прегледање елемента никада не изазива reflow нити repaint саме странице, тако да можете слободно да истражујете, а да не бринете да ћете поремети позицију скроловања, анимације или JavaScript стање. Подржани су и псеудо-елементи попут ::before и ::after — пређите курсором преко родитељског елемента и панел ће одвојено приказати стилове генерисаног садржаја, независно од стилова самог елемента. CSS прилагођена својства (променљиве) се разрешавају до коначне рачунате вредности, али панел вам такође приказује назив променљиве која је произвела ту вредност, тако да можете да пратите боју или вредност размака до њеног изворног дизајн-токена, уместо да видите само сирову вредност у пикселима.

У свакодневној употреби, већина програмера посегне за CSS Инспектором десетине пута током једне сесије — да провере зашто се маргина „скупила“, потврде хекс код пре него што га копирају у стилски лист или провере да ли је прекидна тачка медија упита заиста применила стилове које би требало. Пошто је реч о плутајућем панелу, а не о режиму који заузима цео прегледач, можете га оставити отвореним док прелазите на друге картице да проверите свој код у уређивачу или у дизајн фајлу, а затим се вратите директно на исти елемент над којим сте раније лебдели курсором, без губљења контекста.