CSS Інспектор

Незалежно від того, чи ви налагоджуєте проблему з версткою, чи вивчаєте дизайн, який вам сподобався, чи просто хочете швидко перевірити відступи та типографіку — CSS Inspector дає все необхідне в акуратній плаваючій панелі. На відміну від браузерних DevTools, він не заважає роботі: жодних закріплених панелей, жодної зміни розміру вікна перегляду. Просто наведіть курсор, клацніть — і дивіться. Інструмент показує обчислені стилі (computed styles) — те, що браузер справді рендерить, а не лише авторський CSS. Це означає, що ви бачите реальні значення після застосування успадкування, специфічності та каскадування — саме ті значення, які впливають на те, що бачить користувач на екрані.

Перегляд елемента ніколи не викликає reflow чи repaint самої сторінки, тож ви можете вільно досліджувати її, не боячись збити позицію прокрутки, анімації чи стан JavaScript. Псевдоелементи на кшталт ::before та ::after також підтримуються — наведіть курсор на батьківський елемент, і панель окремо покаже стилі згенерованого контенту та стилі самого елемента. CSS custom properties (змінні) відображаються у вигляді кінцевого обчисленого значення, але панель також показує назву змінної, яка його породила, тож ви можете простежити значення кольору чи відступу аж до його джерела — design-токена, а не просто побачити «сире» число в пікселях.

У щоденній роботі більшість розробників звертаються до CSS Inspector десятки разів за сесію — щоб зрозуміти, чому «схлопнувся» margin, перевірити hex-код перед тим, як вставити його в таблицю стилів, або переконатися, що брейкпоінт media query справді застосував потрібні стилі. Оскільки це плаваюча панель, а не режим на весь браузер, ви можете залишити її відкритою, перемикаючись на вкладки з редактором коду чи файлом дизайну, а потім одразу повернутися до того самого елемента, не втративши місце, де зупинилися.