Справочник по значкам

Sofia Emelianova
Sofia Emelianova
GitHub

В этом справочном руководстве по значкам на панели Элементы рассказывается, как переключать различные оверлеи и ускорять навигацию по дереву DOM.

Как показывать или скрывать значки

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

  1. Откройте инструменты разработчика.
  2. Нажмите правой кнопкой мыши на элемент в дереве DOM и выберите один или несколько значков в подменю Настройки значков.

Меню "Настройки пометок".

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

Просмотр исходного кода

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

Значок &quot;Посмотреть источник&quot;.

Этот значок позволяет не использовать пункт Просмотр кода страницы в контекстном меню Chrome (открывается правой кнопкой мыши).

  1. В Chrome нажмите правой кнопкой мыши на страницу и выберите Просмотреть код.
  2. На панели Элементы нажмите на значок view-source рядом с тегом <html>.
  3. Проверьте исходный код страницы на панели Источники.

Сетка

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

Включить или отключить оверлей для предварительного просмотра:

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

Оверлей сетки.

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

Подробнее о том, как отлаживать макет сетки…

Дополнительная сетка

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

Включить или отключить оверлей для предварительного просмотра:

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

Оверлей подсетки.

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

Согнуть

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

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

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

Гибкий оверлей.

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

Подробнее о том, как проверять и отлаживать макеты Flexbox…

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

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

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

Значок рекламы.

Значок ad неактивен, но если навести на него указатель мыши, появится подсказка с объяснением, почему элемент был идентифицирован как реклама, например:

Подсказка для значка рекламы.

  • Script ancestry: скрипты, задействованные в создании элемента.
  • Правила списка фильтров. Правило из списка фильтров (например, EasyList), которое соответствует элементу или загруженному им ресурсу.

На вкладке Отрисовка можно выделить рекламные фреймы красным цветом.

Прокрутить

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

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

Scroll-snap

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

Включить или отключить оверлей для предварительного просмотра:

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

Оверлей привязки прокрутки.

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

Контейнер

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

Включить или отключить оверлей для предварительного просмотра:

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

Оверлей с контейнером.

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

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

Слот

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

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

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

Верхний слой

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

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

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

Посмотрите, как выглядит значок top-layer (N):

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

Медиа

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

Значок медиа, включенный в настройках значков и показанный рядом с видеоэлементом.

Подробнее о том, как отлаживать медиапроигрыватели с помощью панели "Медиа"…

Всплывающее окно

Всплывающее окно – это любой элемент с атрибутом popover. Он полезен для широкого спектра интерактивных шаблонов, включая подсказки, оповещения, всплывающие уведомления и многое другое. Такие элементы отмечены значком popover.

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

Посмотрите, как выглядит значок popover в следующем примере:

  1. В окне предпросмотра нажмите TOGGLE POPOVER (Переключить всплывающее окно).
  2. Проверьте всплывающее окно.

  3. В дереве DOM нажмите на значок popover рядом с элементом <div popover>. На панели Элементы появится значок top-layer.

    Значок всплывающего окна рядом с элементом с атрибутом всплывающего окна.

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

Дополнительную информацию можно найти на странице https://web.dev/learn/css/popover-and-dialog.

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

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

Этот значок переключает стили в правиле @starting-style, чтобы вы могли увидеть анимацию в действии.

Посмотрите, как выглядит значок "starting-style":

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

  3. В дереве DOM нажмите на значок starting-style рядом с элементом <div popover>.

    Значок starting-style рядом с элементом с правилом @starting-style.

  4. Посмотрите, как работает анимация, и какие стили применяются на вкладке Элементы > Стили.

Подробнее об анимации всплывающих окон…

Custom-element

Пользовательские элементы HTML, которые можно определить по названиям тегов, написанным через дефис, или атрибутам is="..." для пользовательских встроенных элементов, отмечены значками custom-element в дереве DOM.

Нажмите на значок, чтобы перейти к соответствующему коду на панели Источники.

Значок пользовательского элемента рядом с пользовательскими элементами HTML в дереве DOM.