Анализирайте кодовете на всеки уебсайт с разширение на CSS Dig

Има много неща, които можете да направите Chrome DevTools от редактиране на живи уебсайтове до изучаване на подробни HTTP заявки. Но, способност за анализ на CSS модели не се пече в конзолата.

с CSS Dig, можете да анализирате всичко CSS селектори, специфичност, и уникални свойства от всяка уеб страница направо от Chrome. Това разширение е напълно безплатно и предлага много мощност за разработчиците.

Когато инспектирате стилове, ще получите много данни от панела CSS Dig. Тя може да ви покаже отделни селектори, включително дубликати и ненужни нива на специфичност.

За да започнете, просто инсталирайте приставката и отворете прозореца на конзолата. Вие ще откриете два раздела в прозореца на CSS Dig: Имоти и селектори.

Можете да преглеждате резултатите организирани от имоти (цвят, граница, подложка), или от селектори (класове, идентификационни номера). Смятам, че прозорецът Свойства е най-ценният, тъй като ви позволява да изучавате кои шрифтове и цветове използвате.

Този инструмент работи изцяло за всеки уебсайт, така че е удобен и за обратно инженерство дизайн на никого. Можете да копирате / поставите CSS директно от този прозорец и да го използвате отново на вашите собствени проекти.

Вероятно най-често използваният случай за CSS Dig е да изчистване на дублиращи се цветове от вашата цветова палитра. Колко уникални нюанси на зелено наистина имате нужда? Или колко различни шрифтове без сериф са необходими за една страница?

CSS Dig е невероятно прост, така че не очаквайте десетки функции като DevTools. Вместо това този плъгин е по-скоро насочени към разработчиците на интерфейси одитиращи сайтове за повторни селектори или дублиращи се свойства.

Най- програмен код на приставката е достъпна безплатно в GitHub, където ще намерите и всички последни актуализации.