Проанализируйте коды любого сайта с расширением CSS Dig Chrome

Вы можете многое сделать Chrome DevTools от редактирования живых сайтов до изучения подробных HTTP-запросов. Но умение анализировать шаблоны CSS не запекается в консоли.

С CSS Dig, Вы можете проанализировать все CSS селекторы, специфичность, а также уникальные свойства любой веб-страницы прямо из Chrome. Это расширение абсолютно бесплатно и предлагает много возможностей веб-разработчикам.

При просмотре таблицы стилей вы получите много данных с панели CSS Dig. Это может показать вам индивидуальные селекторы, в том числе дубликаты а также ненужные уровни специфичности.

Для начала просто установить плагин и откройте окно консоли. Ты найдешь две вкладки в окне CSS Dig: свойства а также Селекторы.

Вы можете просматривать результаты организованный свойства (цвет, рамка, отступы) или по селекторам (классы, идентификаторы). Я считаю, что окно Свойства является наиболее ценным, поскольку оно позволяет вам изучить, какие шрифты и цвета вы используете.

Этот инструмент работает на всех сайтах, поэтому он также удобен для обратный инжиниринг чей-либо дизайн. Вы можете скопировать / вставить CSS прямо из этого окна и использовать его в своих проектах.

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

CSS Dig невероятно прост, поэтому не ожидайте десятки функций, как с DevTools. Вместо этого этот плагин довольно ориентирован на фронтенд-разработчиков Аудит сайтов для повторных селекторов или дублирующих свойств.

исходный код плагин доступен бесплатно на GitHub, где вы также найдете все последние обновления.