Матвей Земсков

Заметки веб-мастера

Понедельник, 11 мая 2020 12:16

Расширение Chrome: подробный инспектор CSS на любых сайтах

Оцените материал
(0 голосов)

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

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

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

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

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

Инспектирование любого элемента на странице с помощью CSSPeeper

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

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

Информация о шрифтах и CSS стилях выбранного элемента

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

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

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

Оригинал статьи: Detailed CSS Inspector on Any Sites With This Chrome Extension

Перевод: Земсков Матвей

Прочитано 73 раз

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


Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх