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

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

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

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

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

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

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

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

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

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

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *