Навигация по уровням веб-страниц, индексу Z и DOM с помощью средства "Трехмерное представление"

Статья
12/08/2023

Используйте инструмент трехмерного представления для отладки проблем с DOM, z-индексом и составным слоем на веб-странице путем поворота страницы в трехмерном пространстве. Трехмерная визуализация помогает понять иерархию дерева DOM, иерархию контекстного дерева стека z-index и составные слои, созданные на странице.

Инструмент трехмерного представления

Слева инструмент трехмерного просмотра содержит три вкладки:

На вкладке Составные слои отображаются составные слои, созданные браузером для веб-страницы. Каждый слой включает реалистичную отрисовку содержимого на уровне для всестороннего взаимодействия при перемещении страницы в трехмерном пространстве.
На вкладке Z-индекс отображается трехмерное представление дерева контекста стека. Эта вкладка используется для отладки проблем с накоплением z-index на веб-странице.
На вкладке DOM отображается трехмерное представление дерева DOM. Используйте эту вкладку для просмотра модели DOM в целом, со всеми элементами, которые легко доступны.

Справа трехмерный холст представляет веб-страницу в соответствии с выбранной вкладкой и параметрами.

Открытие инструмента трехмерного представления

Инструмент трехмерного просмотра можно открыть на панели действий или на панели быстрого просмотра .

Чтобы получить максимальное пространство на холсте, откройте инструмент Трехмерное представление на панели действий.
Чтобы одновременно использовать инструмент "Элементы" и " Трехмерный вид ", откройте инструмент "Трехмерный вид " на панели "Быстрое представление ". Это позволяет просматривать элементы дерева DOM, представленные на трехмерном холсте. Это значение по умолчанию; В меню Команда показать трехмерный вид отображается как открывающемся на панели быстрого просмотра .

Открытие средства трехмерного представления на панели действий

Откройте веб-страницу, которую вы хотите визуализировать в трехмерном формате. Например, используйте демонстрационную страницу приюта для животных .
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В средствах разработки на панели действий выберите вкладку Трехмерный вид . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") . На панели действий откроется вкладка Трехмерное представление:

Открытие средства трехмерного просмотра на панели быстрого просмотра

Откройте веб-страницу, которую вы хотите визуализировать в трехмерном формате. Например, используйте демонстрационную страницу приюта для животных .
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
Если панель Быстрого просмотра не отображается, выберите Настройка и управление средствами разработки (...), а затем выберите Переключить панель быстрого просмотра. Или, когда фокус находится на devTools, нажмите клавишу ESC.
На панели быстрого просмотра выберите вкладку Трехмерный вид . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") . На панели Быстрого просмотра откроется вкладка Трехмерное представление:

Масштабирование, сдвиг и поворот трехмерного холста

Чтобы просмотреть веб-страницу под разными углами, можно масштабировать, сдвигать и поворачивать трехмерный холст, отображаемый в правой части инструмента трехмерного просмотра .

Увеличение или уменьшение масштаба страницы

Чтобы увеличить или увеличить масштаб веб-страницы на трехмерном холсте, используйте колесико прокрутки мыши или ползунок в правом нижнем углу.

Представление панорамирования (кнопка)

Чтобы переместить страницу влево, вправо, вверх или вниз, нажмите кнопку Панорамирование (, а затем перетащите страницу на трехмерном холсте в нужном направлении с помощью мыши.

Поворот представления (кнопка)

Чтобы повернуть страницу с помощью мыши, нажмите кнопку Повернуть представление (), а затем перетащите страницу на трехмерном холсте в нужном углу мыши.

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

Чтобы повернуть страницу по горизонтали, нажмите клавишу СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО .
Чтобы повернуть страницу по вертикали, нажмите клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ .

Клавиши поворачивают страницу независимо от того, выбрано ли на панели инструментов представление "Сдвиг " или " Повернуть представление ".

Дополнительные сведения см. в следующих разделах этой страницы:

Панель инструментов над 3D-холстом
Элементы управления перемещением в правом нижнем углу

Вкладка Составные слои

В представлении Составные слои на трехмерном холсте отображается список слоев, созданных подсистемой отрисовки браузера для веб-страницы.

Используйте представление Составные слои для анализа количества слоев, созданных кодом CSS, их размер и частоту изменения.

На трехмерном холсте справа выберите элемент веб-страницы. На вкладке Составные слои дерево слоев автоматически расширяется, а на вкладке Сведения под деревом слоев отображаются сведения о выбранном слое:

Вкладка Составные слои

Прямоугольны с медленной прокруткой (флажок)

Флажок Медленно прокручивать прямоугольники выделяет разделы страницы, которые приводят к медленной прокрутке. Этот флажок полезен для изучения проблем с производительностью. Некоторые веб-страницы используют JavaScript для обнаружения прокрутки (или касания) определенных элементов страницы таким образом, чтобы прокрутка веб-страницы была медленнее, чем обычно.

Этот флажок выделяет (розовым цветом) поля отображаемой веб-страницы, которые могут вызвать эти проблемы с производительностью.

Этот флажок похож на флажок Проблемы с производительностью прокрутки в средстве отрисовки , который выделяет медленные прямоугольники непосредственно на странице (желтым цветом). См . статью Поиск проблем с производительностью прокрутки в режиме реального времени в справочнике по функциям производительности. Оба флажка основаны на одной и той же информации об отладке, но эти два средства предоставляют эти сведения по-разному.

Краски (флажок)

Отрисовывает содержимое веб-страницы (цветной файл или файл изображения) на элементы.

Дерево расширителя слоев

Разверните это дерево, чтобы отобразить список составных слоев. Щелкните слой, чтобы отобразить подробные сведения о нем в области Сведения .

Сведения (область сведений)

Область Сведений под панелью Составные слои содержит следующие поля.

Size

Ширина, а затем высота выбранного составного слоя, а также расположение верхнего левого слоя относительно левого верхнего края окна просмотра страницы. Например, "1034 x 28055 (в 0, 0)".

Причины создания

Причины создания слоя подсистемой отрисовки браузера. Например: "Дополнительный слой, в который будет размещено содержимое, которое можно прокручивать".

Оценка памяти

Память, потребляемая для выбранного слоя. Например: "116 МБ".

Количество красок

Сколько раз выбранный слой был закрашен подсистемой отрисовки.

Вкладка Z-индекса

На вкладке Z-index отображаются только элементы веб-страницы, которые стекают контексты или расположены вдоль оси Z:

Вкладка Z-индекса

Дополнительные сведения см. в разделах Контекст стеков и Использование z-index в MDN.

Показать тип элементов (раздел)

Раздел Show Elements type (Показать тип элементов ) на вкладке Z-index определяет, какие элементы страницы отображаются на трехмерном холсте.

Переключатель Показать все отображает элементы контекста с накоплением и элементы, расположенные на оси Z. Это представление полезно для отладки проблем с элементами, неправильно расположенными на оси Z.
Переключатель Показать только контексты стека отображает только элементы страницы, которые являются контекстами стека. Это представление полезно, чтобы быстро узнать, какие элементы стекают контексты на веб-странице.

Флажок Показать метки z-index отображает или скрывает метки z-index на трехмерном холсте. По умолчанию этот флажок установлен.

Тип цвета (раздел)

На вкладке Z-индекс можно выбрать один из следующих цветовых схем, чтобы визуализировать модель DOM на трехмерном холсте:

Сиреневый на белый переключатель — на трехмерном холсте отображаются элементы от фиолетового до белого.
Переключатель "Использовать цвет фона " — на трехмерном холсте отображаются элементы, отрисованные с использованием цвета фона, определенного для каждого элемента.

Эти переключатели позволяют переключаться по параметрам и выбирать тип цвета. Тип цвета - это либо цвет, которые наиболее подходит для проекта, либо цвет, который нравится вам больше всего. Метки z-индекса добавляют визуальные сведения на трехмерный холст, поэтому на вкладке Z-индексов на вкладке Z-index меньше вариантов цвета, чем на вкладке DOM .

Вкладка DOM

Вкладка DOM предоставляет общее представление отладчика дерева DOM. На вкладке DOM отображаются все элементы веб-страницы на трехмерном холсте:

Вкладка DOM

Координаты X и Y элемента на трехмерном холсте соответствуют координатам элемента на веб-странице. Z-координата элемента зависит от того, насколько глубоко вложен элемент в дерево DOM.

Уровень вложения для страницы (ползунок)

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

Кнопка сброса

Сбрасывает уровень вложения для ползунка страницы до значения по умолчанию для страницы.

Тип цвета (раздел)

На вкладке DOM можно выбрать один из следующих цветовых схем, визуализируемых DOM на трехмерном холсте:

Сиреневый на белый переключатель — на трехмерном холсте отображаются элементы от фиолетового до белого.
Синяя до желтая переключатель — на трехмерном холсте отображаются элементы от синего до желтого.
Радужная переключатель — на трехмерном холсте отображаются элементы сиреневой, синей, зеленой, желтой, оранжевой и красной.
Использовать переключатель текстуры экрана — отрисовывает содержимое веб-страницы (цвет или файл изображения) к элементам.
Переключатель "Использовать цвет фона " — на трехмерном холсте отображаются элементы, отрисованные с использованием цвета фона, определенного для каждого элемента.

Повторное snapshot (кнопка)

Нажмите кнопку Retake snapshot ( на вкладке DOM или на вкладке Z-индекс, чтобы обновить трехмерное представление дерева DOM или дерева контекста стека в соответствии с последним окном просмотра веб-страницы. Например, после того, как вы сделаете окно просмотра более узким или переключитесь в представление эмуляции устройства, на каждое эмуляция мобильных устройств (эмуляция устройства).

Если выбрана вкладка Составные слои, эта кнопка опущена, так как при изменении размера окна просмотра повторное получение snapshot происходит автоматически.

Представление сброса (кнопка)

Нажмите кнопку Сбросить представление (, чтобы сбросить сдвиг и поворот страницы.