Elements и стили

Что это такое

Панель Elements показывает живое дерево документа — уже после того, как отработали скрипты и браузер исправил некорректную разметку. Рядом панель Styles перечисляет все правила, применимые к выбранному элементу, в том порядке, в котором их разрешил каскад. На вопрос «почему этот элемент выглядит именно так» лучше всего отвечает сам браузер.

Почему это важно

Рассуждать о CSS в абстракции трудно, потому что каскад зависит от всего документа и области просмотра. Панель Styles убирает догадки: она перечисляет каждое объявление с указанием исходного файла, зачёркивает проигравшие и показывает вычисленное значение, которое применяется на самом деле. Второй класс догадок убирает дерево: DOM, который создал скрипт, часто не тот DOM, который вы ожидали, — обёртка, вставленная фреймворком, элемент, перемещённый парсером, узел, который так и не создался, потому что ветка, обязанная его создать, не выполнилась.

Ключевые идеи

Изучайте разрешённый каскад, а не таблицу стилей

Выберите элемент и читайте панель Styles сверху вниз. Каждое правило указано со ссылкой на строку в исходнике; зачёркнутые объявления были перекрыты чем-то более специфичным или более поздним. Итоговое значение каждого свойства, включая унаследованные, показывает вкладка «computed» — именно там обычно всплывают сюрпризы со значениями в em и процентах.

.card { padding: 1rem; }        ← применено
.card.small { padding: .5rem; } ← зачёркнуто (ниже специфичность)

Поиск свойства по имени в панели быстрее, чем рассуждение о том, какой файл мог его задать.

Редактируйте живое дерево, чтобы проверить гипотезу

Изменения в панели Styles применяются сразу, не касаясь файловой системы, поэтому исправление можно проверить ещё до того, как оно написано, а если отступ исчезает при снятии галочки, значит, это он и создавал проблему: эксперимент на пять секунд, который иначе стоил бы коммита и перезагрузки.

/* набрано в панели Styles для проверки, затем перенесено в исходник */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

Правки не сохраняются: перезагрузите — и они исчезнут, а это ровно то, что нужно от черновика.

Дерево — это DOM после выполнения скриптов

Если элемент отсутствует, вопрос в том, не было его в разметке или скрипт не смог его создать. Правый клик по узлу и просмотр его обработчиков событий отвечает на связанный вопрос, почему обработчик не сработал: обработчика нет, он навешен на другой элемент или был удалён.

Размеры блока видны в модели

Диаграмма блочной модели показывает содержимое, padding, border и margin как четыре концентрических значения — самый быстрый способ закрыть спор о том, откуда взялся размер элемента, а переключение box-sizing в панели показывает разницу между двумя трактовками на реальной вёрстке.

Дерево доступности — второй взгляд на тот же DOM

Инспектор доступности показывает, что объявила бы вспомогательная технология: роль, имя, состояние и ориентиры вокруг, — а убедиться, что метка действительно дошла до элемента управления, а не скрыта родителем, можно только здесь.

Практика

Найдите правило-победителя и правило-проигравшего

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

Готово, когда: вы можете назвать строку исходника проигравшего правила и назвать единственное изменение, которое заставило бы его победить.

Отладьте отсутствующий элемент с помощью живого дерева

Введите условие, которое мешает созданию узла, затем с помощью панели Elements и консоли выясните, узел отсутствует или просто невидим.

Готово, когда: вы отличаете «нет в DOM», «есть в DOM, но скрыт» и «есть в DOM, но за пределами области просмотра», не добавляя строку логирования.

Частые ошибки

Чтение исходника вместо панели — загруженная таблица стилей может отличаться от файла после шага сборки; исправить: проверьте разрешённое правило в панели Styles.
Предположение, что DOM совпадает с разметкой — и скрипты, и парсер его меняют; исправить: инспектируйте дерево, которое у браузера есть на самом деле.
Правка стилей в панели с ожиданием, что они сохранятся — панель работает как черновик; исправить: перенесите рабочее значение в исходник и перезагрузите для подтверждения.
Отладка вёрстки снаружи — причина обычно в отступах или режиме отображения родителя; исправить: поднимитесь по дереву, проверяя блочную модель на каждом уровне.
Игнорирование дерева доступности — элемент управления может выглядеть правильно и не объявлять ничего; исправить: проверяйте, что объявляется, а не только что отрисовано.

Что читать дальше

JavaScript (02-frontend/06-javascript) — консоль и отладчик: там скрипты действительно становятся понятны.
Network и производительность (02-frontend/27-browser-devtools/02-network-and-performance) — две другие панели, которые отвечают на большинство продовых вопросов.
Каскадные таблицы стилей (CSS) (02-frontend/05-css) — правила каскада, которые отображает панель Styles.