CSS Инспектор

Отлаживаете ли вы проблему с макетом, изучаете понравившийся дизайн или просто быстро проверяете значения отступов и типографики — CSS Inspector даёт всё необходимое в аккуратной плавающей панели. В отличие от DevTools браузера, он не мешает работе — никаких закреплённых панелей, никакого изменения размера viewport. Просто наведите курсор, кликните и инспектируйте. Инструмент показывает вычисленные стили (то, что браузер реально рендерит), а не только исходный CSS. Это значит, что вы видите реальные значения после разрешения наследования, специфичности и каскада — те самые значения, которые влияют на то, что видит пользователь на экране.

Инспектирование элемента никогда не вызывает reflow или repaint страницы, поэтому вы можете свободно исследовать её, не беспокоясь о нарушении позиции прокрутки, анимаций или состояния JavaScript. Псевдоэлементы вроде ::before и ::after тоже поддерживаются — наведите курсор на родительский элемент, и панель покажет стили сгенерированного контента отдельно от стилей самого элемента. Пользовательские CSS-свойства (переменные) разрешаются до конечного вычисленного значения, но панель также показывает имя переменной, которая его сформировала, — так вы можете проследить значение цвета или отступа обратно до его дизайн-токена, а не просто увидеть голое число в пикселях.

В повседневной работе большинство разработчиков обращаются к CSS Inspector десятки раз за сессию — проверяя, почему схлопнулся margin, сверяя hex-код перед тем, как скопировать его в таблицу стилей, или убеждаясь, что breakpoint медиа-запроса действительно применил нужные стили. Поскольку это плавающая панель, а не режим на весь браузер, вы можете держать её открытой, переключаясь на вкладки со своим редактором кода или файлом дизайна, а затем сразу возвращаться к тому же элементу под курсором, не теряя контекста.