CSS Inšpektor

Či už riešite problém s rozložením, spätne skúmate dizajn, ktorý sa vám páči, alebo si len rýchlo overujete hodnoty medzier a typografie, CSS Inšpektor vám poskytne všetko potrebné v prehľadnom plávajúcom paneli. Na rozdiel od DevTools v prehliadači vám nestojí v ceste — žiadne ukotvené panely, žiadne zmenšené zobrazenie stránky. Stačí prejsť kurzorom, kliknúť a skúmať. Nástroj zobrazuje vypočítané štýly (to, čo prehliadač skutočne vykresľuje), nielen napísané CSS. To znamená, že vidíte reálne hodnoty po vyriešení dedičnosti, špecifickosti a kaskádovania — teda presne tie hodnoty, ktoré ovplyvňujú to, čo používatelia vidia na obrazovke.

Skúmanie prvku nikdy nespôsobí prekreslenie ani preusporiadanie stránky, takže môžete voľne preskúmavať bez obáv, že narušíte pozíciu posúvania, animácie alebo stav JavaScriptu. Podporované sú aj pseudoprvky ako ::before a ::after — prejdite kurzorom nad nadradeným prvkom a panel zobrazí štýly generovaného obsahu samostatne od štýlov samotného prvku. Vlastné CSS vlastnosti (premenné) sa vyriešia na svoju konečnú vypočítanú hodnotu, no panel vám zároveň ukáže názov premennej, ktorá ju vytvorila, takže farbu alebo hodnotu odsadenia viete vystopovať späť k jej zdrojovému dizajnovému tokenu namiesto toho, aby ste videli len holé číslo v pixeloch.

V bežnom používaní siahajú vývojári po CSS Inšpektore počas jedného sedenia aj niekoľko desiatokrát — či už zisťujú, prečo sa zrútil margin, overujú hex kód pred jeho skopírovaním do stylesheetu, alebo kontrolujú, či daný breakpoint media query naozaj aplikoval štýly, ktoré mal. Keďže ide o plávajúci panel a nie režim na celý prehliadač, môžete ho nechať otvorený aj pri prepínaní na iné karty — napríklad kvôli kontrole vlastného kódu v editore alebo dizajnovom súbore — a potom sa vrátiť rovno k tomu istému prvku bez toho, aby ste stratili miesto, kde ste skončili.