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

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

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

Читайте также: Веб-дизайн: начало работы с инструментами разработчика Chrome

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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