CSS Inspector

Ať už ladíte problém s rozvržením stránky, zpětně analyzujete design, který se vám líbí, nebo si jen rychle ověřujete hodnoty rozestupů a typografie, CSS Inspector vám nabídne vše potřebné v přehledném plovoucím panelu. Na rozdíl od prohlížečových DevTools vám nestojí v cestě – žádné ukotvené panely, žádné zmenšení viewportu. Stačí najet myší, kliknout a zkoumat. Nástroj zobrazuje vypočítané (computed) styly, tedy to, co prohlížeč skutečně vykresluje, nikoli jen zapsaný CSS kód. Znamená to, že vidíte reálné hodnoty po vyřešení dědičnosti, specificity a kaskády – tedy přesně ty hodnoty, které ovlivňují, co uživatel vidí na obrazovce.

Inspekce prvku nikdy nevyvolá reflow ani překreslení stránky, takže můžete stránku volně prozkoumávat, aniž byste se museli obávat narušení pozice scrollování, animací nebo stavu JavaScriptu. Podporovány jsou i pseudoprvky ::before a ::after – najetím na rodičovský prvek panel zobrazí styly generovaného obsahu odděleně od stylů samotného prvku. CSS proměnné (custom properties) jsou vyřešeny na svou finální vypočítanou hodnotu, ale panel navíc zobrazí i název proměnné, ze které tato hodnota vznikla, takže barvu nebo hodnotu rozestupu můžete dohledat až k jejímu zdrojovému design tokenu, a ne se dívat jen na holé číslo v pixelech.

V běžném provozu sahá většina vývojářů po CSS Inspectoru desítkykrát za relaci – aby zjistili, proč se zhroutil margin, ověřili si hexadecimální kód barvy před jeho zkopírováním do stylopisu, nebo potvrdili, že mediální dotaz na daném breakpointu skutečně aplikoval zamýšlené styly. Protože jde o plovoucí panel, a ne o režim přes celý prohlížeč, můžete ho nechat otevřený i při přepínání záložek – třeba do vlastního editoru kódu nebo návrhového souboru – a pak se vrátit přesně k témuž prvku, aniž byste ztratili kontext.