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

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

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

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

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

Оцените материал
(1 Голосовать)

Обычный инструмент для разработчиков в 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

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

Прочитано 4682 раз
Свежие заметки
Наверх