Analyzovat všechny webové stránky kódy s CSS Dig Chrome rozšíření

Se spoustou věcí, které můžete udělat Chrome DevTools od editace živých webových stránek až po studium podrobných požadavků HTTP. Ale schopnost analyzovat vzory CSS není zapálen do konzoly.

S CSS Dig, můžete analyzovat všechny CSS voliče, specifičnosti, a jedinečné vlastnosti webové stránky přímo z Chrome. Toto rozšíření je zcela zdarma a nabízí mnoho energie vývojářům frontendu.

Jak si prohlížíte stylesheet, dostanete spoustu dat z CSS Dig panelu. To vám může ukázat jednotlivých selektorů, počítaje v to duplikáty a zbytečné úrovně specifičnosti.

Chcete-li začít, jednoduše nainstalovat plugin a otevřete okno konzoly. Najdeš dvě záložky v okně Digs: Vlastnosti a Selektory.

Výsledky můžete procházet organizované podle vlastností (barva, ohraničení, polstrování), nebo voliči (třídy, ID). Okno Vlastnosti považuji za nejcennější, protože umožňuje studovat, která písma a barvy používáte.

Tento nástroj funguje napříč všemi webovými stránkami, takže je také vhodný pro reverzní inženýrství design někoho. CSS můžete kopírovat / vkládat přímo z tohoto okna a znovu použít na vlastních projektech.

Pravděpodobně nejběžnější případ použití CSS Dig je jasné duplicitní barvy z palety barev. Kolik jedinečných odstínů zelené opravdu potřebujete? Nebo, kolik různých sans-serif fontů je potřeba pro jednu stránku?

CSS Dig je neuvěřitelně jednoduché, takže neočekávejte desítky funkcí jako u DevTools. Místo toho je tento plugin spíše zaměřené na vývojáře frontendu auditování míst pro opakované selektory nebo duplicitní vlastnosti.

zdrojový kód plugin je k dispozici zdarma na GitHub, kde najdete také všechny poslední aktualizace.