Вы можете многое сделать с помощью инспектора DevTools CSS, но в нем нет четкого графического интерфейса, а это понравилось бы каждому разработчику.
Попробуйте CSSPeeper, бесплатное расширение для Chrome, которое добавляет GUI-инспектор в ваш браузер. Это позволит вам изучить любое CSS-свойство любого элемента на любой странице, открытой в браузере Chrome.
После установки вы просто заходите на веб-страницу и нажимаете кнопку расширения на панели дополнений Chrome. В верхней части веб-страницы появится новое окно инспектора с подробной информацией о каждом основном элементе.
Когда вы просматриваете сайт, вы можете нажать на любой элемент, который выделен пунктирным контуром. Это могут быть кнопки, разделы страницы, заголовки и элементы навигации.
При этом рядом с элементом откроется целый инспектор с подробной информацией о типографике, цвете и стилях шрифта. Это отличный способ извлекать стили прямо с веб-страницы, не копаясь самостоятельно в CSS-коде.
CSSPeeper даже позволяет вам выбирать связанные цвета с помощью встроенного средства выбора цвета и генератора цветовой схемы. Вы можете экспортировать изображения со страниц, создавать собственные цветовые схемы и применять их в собственных макетах в Photoshop или Sketch.
Автор статьи в первую очередь рекомендует это расширение для дизайнеров, а не для разработчиков, так как он гораздо более удобный, чем плагин для разработчиков, который извлекает необработанный CSS и преобразует код в данные удобные для чтения.
Но этот плагин также может помочь разработчикам! Это действительно мощный инструмент проверки сайтов для всех типов CSS.
Взгляните на домашнюю страницу CSSPeeper, чтобы узнать больше о его возможностях. На главной странице есть ссылка на магазин Chrome, чтобы вы могли бесплатно установить расширение и протестировать его.
Оригинал статьи: Detailed CSS Inspector on Any Sites With This Chrome Extension
Перевод: Земсков Матвей