Ссылка на значки

Sofia Emelianova

Переключайте различные наложения и ускоряйте навигацию по дереву DOM с помощью этого подробного справочника по значкам на панели «Элементы» .

Показать или скрыть значки

Чтобы показать или скрыть значки:

1. Откройте Инструменты разработчика .
2. Щелкните правой кнопкой мыши элемент в дереве DOM и выберите «Настройки значка...» .
3. Установите или снимите флажки рядом с выбранными значками.

На панели «Элементы» выбранные значки отображаются рядом с соответствующими элементами в дереве DOM. В следующих разделах объясняется каждый значок.

Сетка

Элемент HTML является контейнером сетки , если для его свойства CSS display установлено grid или inline-grid . Рядом с такими элементами есть значки grid , которые переключают соответствующие наложения.

Включите наложение в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM щелкните значок grid рядом с элементом и просмотрите наложение.

Наложение показывает столбцы, строки, их номера и пробелы.

Чтобы узнать, как отлаживать макет сетки, см. раздел Проверка сетки CSS .

Подсетка

Подсетка — это вложенная сетка, которая использует те же дорожки, что и родительская сетка. Элемент является контейнером подсетки, если одно или оба его свойства grid-template-columns и grid-template-rows имеют значение subgrid . Рядом с такими элементами есть значки subgrid , которые переключают соответствующие наложения.

Включите наложение в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM щелкните значок subgrid рядом с элементом и просмотрите наложение.

Наложение показывает столбцы, строки, их номера и пробелы в подсетке.

Гибкий

Элемент HTML является гибким контейнером , если для его свойства CSS display установлено значение flex или inline-flex . Рядом с такими элементами есть flex значки, которые переключают соответствующие наложения.

Включите наложение в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM щелкните flex значок рядом с элементом и просмотрите наложение.

Наложение показывает позиции дочерних элементов.

Чтобы узнать, как отлаживать гибкие макеты, см. раздел «Проверка и отладка CSS flexbox» .

Объявление

DevTools может обнаружить некоторые рекламные рамки и пометить их . Рядом с такими кадрами есть ad значки.

Откройте для себя рекламу в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM найдите элемент со значком ad рядом с ним.

Значок ad неактивен, но вы можете использовать вкладку «Визуализация» , чтобы выделить рамки объявления красным цветом.

Прокрутка-привязка

HTML-элемент является контейнером прокрутки, если для его свойства CSS overflow установлено значение scroll или auto если содержимого достаточно, чтобы вызвать переполнение. Контейнеры прокрутки могут иметь свойства CSS, которые настраивают точки привязки . Рядом с такими элементами есть значки scroll-snap , которые переключают соответствующие наложения.

Включите наложение в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM щелкните значок scroll-snap рядом с элементом.
3. Попробуйте прокрутить элемент вправо и наблюдать за наложением.

Наложение показывает положения элементов и точки привязки.

Контейнер

Элемент HTML является контейнером , если он имеет свойство CSS container-type . Рядом с такими элементами есть значки container , которые переключают соответствующие наложения.

Примечание. Запросы CSS-контейнера — это экспериментальная функция. Чтобы включить его поддержку в DevTools, в разделе chrome://flags установите для эксперимента Enable CSS Container Queries значение « Enabled . В противном случае следующий предварительный просмотр не будет работать.

Включите наложение в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM щелкните значок container рядом с элементом.
3. Попробуйте изменить размер элемента, перетащив его правый нижний угол, и наблюдайте за изменением макета и наложением.

Наложение показывает позиции дочерних элементов.

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

Слот

HTML-элемент <slot> — это заполнитель, который вы можете заполнить собственным содержимым. Вместе с элементом <template> <slot> позволяет создавать отдельные деревья DOM и представлять их вместе. Элементы содержимого слота имеют значки slot рядом с ними, которые служат ссылками на соответствующие слоты.

Откройте для себя значок slot в следующем предварительном просмотре:

1. Осмотрите элемент в предварительном просмотре.
2. В дереве DOM щелкните значок значок slot рядом с элементом, чтобы найти соответствующий слот.
   Ключевой момент: Значок slot имеет парный reveal значок, который вернет вас обратно.
3. Вернитесь к содержимому слота, нажав кнопку reveal значок.

Верхний слой

Этот значок поможет вам понять концепцию верхнего слоя и визуализировать ее. Верхний слой отображает контент поверх всех остальных слоев, независимо от z-index . Когда вы открываете элемент <dialog> с помощью метода .showModal() , браузер помещает его на верхний уровень.

Чтобы помочь вам визуализировать элементы верхнего слоя, панель «Элементы» добавляет контейнер #top-layer в дерево DOM после закрывающего тега </html> .

Элементы верхнего слоя имеют рядом с ними значки top-layer (N) , где N — порядковый номер элемента. Значки представляют собой ссылки на соответствующие элементы в контейнере #top-layer .

Откройте для себя значок top-layer (N) в следующем предварительном просмотре:

1. В предварительном просмотре нажмите Открыть диалоговое окно .
2. Осмотрите диалог .
3. В дереве DOM щелкните значок значок top-layer (1) рядом с элементом <dialog> . Панель «Элементы» приведет вас к соответствующему элементу в контейнере #top-layer после закрывающего тега </html> .
   Ключевой момент: Значок top-layer (N) имеет парный reveal значок, который вернет вас обратно.
4. Вернитесь к элементу <dialog> , щелкнув значок reveal значок рядом с элементом или его ::backdrop .

СМИ

Значок media по умолчанию отключен. Если этот параметр включен , он отображается рядом с элементами <audio> и <video> . Нажмите на этот значок, чтобы открыть панель «Медиа» и выполнить отладку медиафайлов.

Дополнительные сведения см. в разделе Отладка медиаплееров с помощью панели «Медиа» .