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

Sofia Emelianova
Sofia Emelianova
GitHub

Toggle various overlays and speed up DOM tree navigation with this comprehensive reference of badges in the Elements panel.

Show or hide badges

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

  1. Open DevTools .
  2. Щелкните правой кнопкой мыши по элементу в DOM-дереве и выберите один или несколько значков в подменю «Настройки значков» .

Меню «Настройки значка».

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

Просмотреть исходный код

Значок view-source находится рядом с тегом <html> в корневой директории HTML-страницы. Щелкните по нему, чтобы просмотреть исходный код вашей страницы на панели «Источники» .

Значок «Посмотреть исходный код».

Этот значок предоставляет альтернативный способ просмотра исходного кода страницы по сравнению с опцией «Просмотреть исходный код страницы» в контекстном меню Chrome (по щелчку правой кнопкой мыши):

  1. В Chrome щелкните правой кнопкой мыши > Проверить элемент на странице.
  2. In the Elements panel, click the view-source badge next to the <html> tag.
  3. Проверьте исходный код страницы в панели «Источники» .

Сетка

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

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

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

Grid overlay.

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

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

Подсеть

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

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

  1. Inspect the element in the preview.
  2. В дереве DOM щелкните значок subgrid рядом с элементом и посмотрите на наложенное изображение.

Наложение подсетки.

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

Флекс

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

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

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

Гибкое наложение.

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

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

Инструменты разработчика могут обнаруживать рекламные фреймы и помечать их . Рядом с такими фреймами отображаются ad значки.

Ознакомьтесь с рекламным объявлением в следующем фрагменте:

  1. Просмотрите элемент в окне предварительного просмотра.
  2. In the DOM tree, find an element with the ad badge next to it.

Рекламный значок.

The ad badge is not clickable but if you hover over it, you will see a tooltip that provides context on why the element was identified as an ad, such as:

Всплывающая подсказка рекламного значка.

  • Script ancestry : Which scripts were involved in creating the element.
  • Filter list rules : The specific rule from a filter list (for example, EasyList ) that matched the element or the resource it loaded.

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

Прокрутка

An HTML element is a scroll container if its overflow CSS property is set to scroll , or auto when there's enough content to cause overflow. Such elements have scroll badges next to them.

Значок прокрутки на узле дерева DOM.

привязка к прокрутке

Scroll containers can have CSS properties that configure snap points . Such elements have scroll-snap badges next to them that toggle the corresponding overlays.

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

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

Наложение привязки к прокрутке.

The overlay shows element positions and snap points.

Контейнер

An HTML element is a container if it has the container-type CSS property. Such elements have container badges next to them that toggle the corresponding overlays.

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

  1. Просмотрите элемент в окне предварительного просмотра.
  2. In the DOM tree, click the container badge next to the element.
  3. Try resizing the element by dragging its bottom-right corner and observe the layout change and overlay.

Наложение контейнера.

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

To learn how to debug container queries, see Inspect and debug CSS container queries .

Слот

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

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

  1. Просмотрите элемент в окне предварительного просмотра.
  2. In the DOM tree, click the slot badge next to the element to locate the corresponding slot. Вставьте и откройте значки.
  3. Get back to the slot's content by clicking the reveal badge.

Верхний слой

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

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

Top layer elements have top-layer (N) badges next to them, where N is the element's index number. The badges are links to the corresponding elements in the #top-layer container.

Discover the top-layer (N) badge in the following preview:

  1. В окне предварительного просмотра нажмите «Открыть диалоговое окно» .
  2. Проверьте диалоговое окно .
  3. In the DOM tree, click the top-layer (1) badge next to the <dialog> element. The Elements panel takes you to the corresponding element in the #top-layer container after the closing </html> tag. Верхний контейнер и значок.
  4. Get back to the <dialog> element by clicking the reveal badge next to the element or its ::backdrop .

СМИ

The media badge is turned off by default. When turned on , it appears next to <audio> and <video> elements. Click this badge to open the Media panel and debug your media.

The media badge turned on in badge settings and displayed next to the video element.

For more information, see Debug media players with the Media panel .

Поповер

Всплывающее окно (popover) — это любой элемент, имеющий атрибут popover , и он полезен для широкого спектра интерактивных элементов, включая всплывающие подсказки, оповещения, уведомления и многое другое. Рядом с такими элементами отображаются значки popover .

Этот значок переключает расположенный рядом значок top-layer , который ведет к соответствующим элементам в контейнере #top-layer .

Discover the popover badge in the following preview:

  1. В окне предварительного просмотра нажмите кнопку "Включить всплывающее окно" .
  2. Проверьте появившееся всплывающее окно .

  3. In the DOM tree, click the popover badge next to the <div popover> element. The Elements panel shows you top-layer badge.

    The popover badge next to the element with a popover attribute.

  4. Выполните действия, описанные в разделе «Верхний слой» .

To learn more, see also https://web.dev/learn/css/popover-and-dialog .

Начальный стиль

Правило @starting-style определяет начальные стили элемента до его отображения на странице. Это необходимо для элементов, которые анимируются из display: none , поскольку им требуется состояние, из которого начинается анимация. Рядом с такими элементами отображаются значки starting-style .

This badge toggles the styles in the @starting-style rule, so you can see the animation in action.

Discover the starting-style badge in the following preview:

  1. В окне предварительного просмотра нажмите кнопку «ОТКРЫТЬ ВСПЛЫВАЮЩЕЕ ОКНО» .
  2. Проверьте появившееся всплывающее окно .

  3. In the DOM tree, toggle the starting-style badge next to the <div popover> element.

    The starting-style badge next to the element with the @starting-style rule.

  4. Observe the animation in action and the styles being applied in the Elements > Styles tab.

Для получения более подробной информации см. также раздел «Анимация всплывающих окон» .