CSS Inspector

Akár egy elrendezési hibát próbál megoldani, akár egy Önnek tetsző dizájnt fejt vissza, akár csak gyorsan ellenőrizni szeretné a térköz- és tipográfiai értékeket, a CSS Inspector mindent megad, amire szüksége van egy letisztult, lebegő panelen. A böngésző DevTools-ától eltérően nem áll az útjában — nincs dokkolt panel, nincs átméretezett nézetablak. Csak vigye fölé az egeret, kattintson, és vizsgálja meg. Az eszköz a számított stílusokat mutatja (azt, amit a böngésző ténylegesen renderel), nem csupán a megírt CSS-t. Ez azt jelenti, hogy a valós értékeket látja azután, hogy az öröklődés, a specificitás és a kaszkád feloldódott — pontosan azokat az értékeket, amelyek meghatározzák, mit lát a felhasználó a képernyőn.

Egy elem vizsgálata soha nem okoz reflow-t vagy repaint-et magán az oldalon, így szabadon kutakodhat anélkül, hogy aggódnia kellene a görgetési pozíció, az animációk vagy a JavaScript-állapot megzavarása miatt. Az olyan álelemek, mint a ::before és ::after, szintén támogatottak — vigye az egeret a szülő elem fölé, és a panel külön mutatja a generált tartalom stílusait az elem saját stílusaitól. A CSS egyedi tulajdonságok (változók) a végső számított értékükre oldódnak fel, de a panel azt a változónevet is megmutatja, amely ezt az értéket eredményezte, így egy szín vagy térközérték nyomon követhető egészen a design-token forrásáig, ahelyett hogy csak egy nyers pixelszámot látna.

A mindennapi használat során a legtöbb fejlesztő munkamenetenként több tucatszor nyúl a CSS Inspectorhoz — hogy ellenőrizze, miért omlott össze egy margó, megerősítse a hexakódot, mielőtt bemásolná egy stíluslapba, vagy meggyőződjön róla, hogy egy media query töréspont valóban alkalmazta-e a rá szánt stílusokat. Mivel ez egy lebegő panel, nem pedig egy böngészőszintű mód, nyitva tarthatja, miközben más lapokra vált, hogy megnézze a saját kódszerkesztőjét vagy egy design fájlt, majd egyenesen visszatérhet ugyanahhoz az elemhez anélkül, hogy elveszítené a helyét.