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

София Емельянова
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

Сетка

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

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

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

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

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

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

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

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

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

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

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

Прокрутка

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

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

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

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

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

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

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

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

Контейнер

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

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

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

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

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

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

Слот

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

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

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

СМИ

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

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

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

Поповер

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

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

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

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

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

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

  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.

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

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