Podrobný CSS inspektor na každém místě s CSSPeeper pro Chrome

Pravidelný panel Chrome DevTools je šílený mocný. To umožňuje komukoliv ponořit se hluboko do jakékoli stránky, aby si v případě potřeby prostudovala rozvržení stránek, CSS a dokonce i HTTP hlavičky.

Můžete udělat hodně s inspektorem DevTools CSS. Ale nemá jasný panel GUI a to je jedna věc, kterou by si každý vývojář rád zamiloval.

Podívejte se na CSSPeeper, bezplatné rozšíření Chrome, které přidává tento inspektor GUI do vašeho prohlížeče. To vám umožní studovat vlastnosti CSS libovolného prvku na libovolné stránce, ačkoli je to právě vytvořeno pro Chrome právě teď.

Po instalaci stačí navštivte webovou stránku a klikněte na hlavní tlačítko rozšíření v panelu doplňků Chrome. V horní části webové stránky se zobrazí nové okno s podrobnostmi o každém hlavním prvku.

Při procházení webu můžete kliknout na libovolný prvek, který vidíte s tečkovaným obrysem. To může zahrnovat tlačítka, části stránky, záhlaví, položky navigace, které pojmenujete.

Odtud dostanete celý inspektor s podrobnostmi o typografii, výběru barev a stylu písma. Je to skvělý způsob, jak vytáhněte styly přímo z webové stránky bez nutnosti kopání do CSS kódu sami.

CSSPeeper vám dokonce umožňuje vybírejte související barvy pomocí vestavěného nástroje pro výběr barev a generátor barevných schémat. Obrázky můžete exportovat ze stránek, vytvářet vlastní barevná schémata a aplikovat je do svých vlastních maket s aplikací Photoshop nebo Sketch.

Já primárně Doporučujeme toto rozšíření pro projektanty namísto vývojářů, protože je to mnohem více zásuvný modul pro návrháře, který vytáhne surové CSS a transformuje kód na snadno čitelné kousky dat.

Ale tento plugin může také pomoci vývojářům! Je to opravdu výkonný nástroj pro inspekci všech typů CSS.

Podívejte se na domovskou stránku CSSPeeper a dozvíte se více o tom, co může udělat. Hlavní stránka také obsahuje odkaz na obchod Chrome, takže můžete bezplatně nainstalovat rozšíření a odebrat jej na testovací běh.