Детальный инспектор CSS на каждом сайте с CSSPeeper для Chrome

Обычная панель Chrome DevTools невероятно мощная. Это позволяет любому глубоко погрузиться в любую страницу, чтобы изучить макет сайта, CSS и даже заголовки HTTP, если это необходимо..

Вы можете многое сделать с помощью инспектора DevTools CSS. Но он не имеет четкой панели графического интерфейса, и это то, что каждый разработчик будет любить.

Проверьте CSSPeeper, бесплатное расширение Chrome, которое добавляет этот инспектор GUI в ваш браузер. Он позволяет изучать свойства CSS любого элемента на любой странице, хотя сейчас он построен только для Chrome..

После установки вы просто посетите веб-страницу и нажмите главную кнопку расширения в панели дополнений Chrome. В верхней части веб-страницы появится новое окно инспектора с подробной информацией о каждом главном элементе..

Когда вы просматриваете сайт, вы можете нажать на любой элемент, который вы видите с пунктирным контуром. Это может включать в себя кнопки, разделы страницы, заголовки, элементы навигации, вы называете это.

Оттуда вы получите целый инспектор с подробной информацией о типографии, выборе цвета и стилях шрифта. Это отличный способ вытащить стили прямо с веб-страницы не копаясь в коде CSS самостоятельно.

CSSPeeper даже позволяет вам выбрать связанные цвета с помощью встроенного палитры цветов и генератор цветовой схемы. Вы можете экспортировать изображения со страниц, создавать собственные цветовые схемы и применить их в свои собственные макеты с фотошопом или эскизом.

Я в первую очередь рекомендую это расширение для дизайнеров вместо разработчиков, поскольку это гораздо более удобный для разработчиков плагин, который извлекает простой CSS и преобразует код в легко читаемые куски данных..

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

Взгляните на домашнюю страницу CSSPeeper, чтобы узнать больше о том, что он может сделать. На главной странице также есть ссылка на магазин Chrome, чтобы вы могли бесплатно установить расширение и взять его для пробного запуска..