Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Используйте средство "Трехмерное представление " для отладки проблем DOM, индекса z и составного слоя на веб-странице, повернув страницу в трехмерном пространстве. Трехмерная визуализация помогает понять иерархию дерева DOM, иерархию дерева контекста стопки z-index и составные слои, созданные на странице.
Подробное содержание:
- Введение
- Открытие средства "Трехмерное представление"
- Масштабирование, панорамирование и поворот трехмерного полотна
- Вкладка Композитные слои
- Вкладка индекса Z
- Вкладка DOM
- Панель инструментов над трехмерным холстом
- Элементы управления движением в правом нижнем углу
- См. также
Введение
Используйте средство "Трехмерное представление " для отладки проблем DOM, индекса z и составного слоя на веб-странице, повернув страницу в трехмерном пространстве. Трехмерная визуализация помогает понять иерархию дерева DOM, иерархию дерева контекста стопки z-index и составные слои, созданные на странице.
Слева инструмент "Трехмерное представление " содержит 3 вкладки:
На вкладке Композитные слои показаны композитные слои, созданные браузером для вашей веб-страницы. Каждый слой включает реалистичную визуализацию содержимого в слое, что обеспечивает комплексное взаимодействие при перемещении страницы в трехмерном пространстве.
На вкладке индекса Z показано трехмерное представление дерева контекста наложения. Используйте эту вкладку для отладки проблем с наложением индекса z на веб-странице.
На вкладке DOM отображается трехмерное представление дерева DOM. Используйте эту вкладку, чтобы изучить DOM как единое целое со всеми доступными элементами.
Справа трехмерный холст представляет веб-страницу в соответствии с выбранной вкладкой и параметрами.
Видео: Отладка веб-страниц в 3D
Открытие средства "Трехмерное представление"
Инструмент трехмерного представления можно открыть на панели действий или на панели быстрого просмотра .
Чтобы получить максимальное пространство на холсте, откройте средство трехмерного представления на панели действий.
Чтобы использовать средства "Элементы " и "Трехмерное представление " одновременно, откройте их на панели быстрого просмотра . Это позволяет просматривать элементы дерева DOM, представленные на трехмерном холсте. Этот параметр используется по умолчанию; в меню командпараметр "Показать трехмерное представление " отмечен как открывающийся на панели быстрого просмотра .
Открытие средства трехмерного представления на панели действий
Откройте веб-страницу, которую нужно визуализировать в трехмерном формате. Например, воспользуйтесь демонстрационной страницей приюта для животных .
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В средствах разработчика на панели действий выберите вкладку "Трехмерное представление ". Если эта вкладка не отображается, нажмите кнопку "Дополнительные инструменты " (
"). На панели действий откроется вкладка "Трехмерное представление".
Открытие средства "Трехмерное представление" на панели "Экспресс-вид"
Откройте веб-страницу, которую нужно визуализировать в трехмерном формате. Например, воспользуйтесь демонстрационной страницей приюта для животных .
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
Если панель быстрого просмотра не отображается, выберите "Настройка средств разработчика и управление ими" (...), а затем выберите "Переключить панель быстрого просмотра". Или, если фокус находится на средствах разработчика, нажмите клавишу ESC.
На панели быстрого просмотра откройте вкладку "Трехмерное представление ". Если эта вкладка не отображается, нажмите кнопку "Дополнительные инструменты " (
"). На панели быстрого просмотра откроется вкладка "Трехмерное представление".
Включение WebGPU для разработки на компьютерах без аппаратного GPU
Средство 3D-представления использует API WebGPU для доступа к высокопроизводительному аппаратному графическому процессору. На компьютерах без аппаратного графического процессора в качестве обходного решения можно включить следующие флаги только в среде разработки.
Эти флаги не являются стандартными обязательными условиями для открытия средства трехмерного представления . Если средство работает на вашем компьютере, установите для флагов значения по умолчанию.
Внимание! Соблюдайте осторожность при включении этих флажков. Флаг enable-unsafe-webgpu обеспечивает оптимальную поддержку WebGPU в неподдерживаемых конфигурациях и может создать проблемы безопасности для веб-сайтов. Используйте этот флаг только для собственной разработки. Флаг ignore-gpu-blocklist переопределяет встроенный список программной отрисовки браузера, включая ускорение графического процессора в неподдерживаемых конфигурациях системы. Эти флажки влияют на браузер, а не только на средство 3D-представления .
Чтобы попробовать это решение:
В Microsoft Edge сохраните все результаты работы на открытых вкладках.
Перейти на страницу
edge://flags.Выполните поиск по запросу
ignore-gpu-blocklist, а затем установите флажок в положение "Включено". Вы также можете перейти непосредственно кedge://flags/#ignore-gpu-blocklistВыполните поиск по запросу
enable-unsafe-webgpu, а затем установите флажок в положение "Включено". Вы также можете перейти непосредственно кedge://flags/#enable-unsafe-webgpuВ правом нижнем углу появится кнопка "Перезапустить ".
Нажмите кнопку "Перезапустить ".
Microsoft Edge перезапустится.
Перейдите на веб-страницу, которую хотите визуализировать.
Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".
Откроются средства разработчика.
Открытие средства "Трехмерное представление ".
Выполните отладку веб-страницы.
По окончании отладки в
edge://flags, установитеignore-gpu-blocklistфлаг и флажок в положение По умолчанию (enable-unsafe-webgpuили Отключено), а затем нажмите кнопку "Перезапустить" в правом нижнем углу.
Масштабирование, панорамирование и поворот трехмерного полотна
Чтобы просмотреть веб-страницу под разным углом, можно масштабировать, сдвигать и вращать трехмерное полотно, которое отображается в правой части средства "Трехмерное представление ".
Увеличение или уменьшение масштаба страницы
Чтобы увеличить или уменьшить масштаб веб-страницы на трехмерном полотне, используйте колесико мыши или ползунок в правом нижнем углу.
Режим панорамирования (кнопка)
Чтобы сдвинуть страницу влево, вправо, вверх или вниз, нажмите кнопку представления панорамирования (
и перетащите страницу по трехмерному полотну в нужном направлении с помощью мыши.
Представление поворота (кнопка)
Чтобы повернуть страницу с помощью мыши, нажмите кнопку Повернуть представление (
а затем перетащите страницу по трехмерному полотну на нужный угол с помощью мыши.
Чтобы повернуть страницу с помощью клавиатуры, щелкните трехмерное полотно для перемещения на него фокуса так, чтобы появилась черная рамка, а затем нажмите клавиши со стрелками.
- Чтобы повернуть страницу по горизонтали, нажмите клавишу СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО .
- Чтобы повернуть страницу по вертикали, нажмите клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ .
Клавиши поворачивают страницу независимо от того, выбрана ли кнопка представления сдвига или поворота представления на панели инструментов.
Дополнительные сведения см. в других разделах на этой странице.
Вкладка Композитные слои
В представлении Composited Layers на 3D-холсте отображается список слоев, созданных модулем визуализации браузера для веб-страницы.
Используйте представление Составные слои, чтобы проанализировать, сколько слоев создается кодом CSS, насколько они велики и как часто они меняются.
На трехмерном холсте справа выберите элемент веб-страницы. На вкладке Композитные слои дерево слоев раскрывается автоматически, а на вкладке Детали под деревом слоев отображается информация о выбранном слое:
Прямоугольники с медленной прокруткой (флажок)
Флажок "Медленная прокрутка" выделяет те части страницы, которые вызывают медленную прокрутку. Этот флажок полезен при анализе проблем с производительностью. На некоторых веб-страницах используется JavaScript для обнаружения прокрутки (или касания) определенных элементов таким образом, что прокрутка веб-страницы может быть медленнее, чем обычно.
Этот флажок выделяет (розовым цветом) поля отрисованной веб-страницы, которые могут вызвать эти проблемы с производительностью.
Этот флажок аналогичен флажку "Проблемы с производительностью прокрутки " в средстве отрисовки , который выделяет медленные прямоугольники непосредственно на странице (желтым цветом). См. раздел "Поиск проблем с производительностью прокрутки в режиме реального времени " в справочнике по функциям производительности. Оба флажка основаны на одинаковых сведениях об отладке, но эти два средства предоставляют эти сведения по-разному.
Краски (флажок)
Отображает содержимое веб-страницы (цвет или файл изображения) на элементах.
Дерево расширителей слоев
Разверните это дерево, чтобы отобразить список составных слоев. Щелкните слой, чтобы отобразить подробную информацию о нем на информационной панели Подробности .
Сведения (информационная панель)
Панель сведений под панелью Составные слои содержит следующие поля.
Size
Ширина, а затем высота выбранного составного слоя, а также расположение левого верхнего края слоя относительно левого верхнего угла окна просмотра страницы. Например, "1034 x 28055 (at 0, 0)".
Причины компоновки
Причины, по которым браузерный модуль обработки изображений создал слой. Например: "Вторичный слой, для размещения содержимого, которое можно прокручивать".
Оценка памяти
Память, потребляемая для выбранного слоя. Например: "116 МБ".
Количество красок
Сколько раз выбранный слой был отрисован движком рендеринга.
Вкладка индекса Z
На вкладке индекса Z отображаются только элементы веб-страницы, которые являются контекстами наложения или расположены вдоль оси Z:
Дополнительные сведения см. в разделах Контекст наложения и Использование индекса z в MDN.
Показать тип элементов (раздел)
Раздел «Показать тип элементов» на вкладке индекса Z определяет, какие элементы страницы отображаются на трехмерном холсте.
Переключатель "Показать все " показывает как элементы контекста наложения, так и элементы, расположенные на оси Z. Это представление полезно для отладки проблем с элементами, которые неправильно расположены на оси Z.
Переключатель Показать только контексты наложения показывает только элементы страницы, которые являются контекстами наложения. Это представление полезно для быстрого поиска элементов, формирующих контексты на веб-странице.
Флажок Показать метки индекса z показывает или скрывает метки индекса z на трехмерном полотне. По умолчанию этот флажок установлен.
Тип цвета (секция)
На вкладке индекса Z можно выбрать одну из следующих цветовых схем для визуализации DOM на трехмерном полотне:
Переключатель "От лилового к белому ": на трехмерном холсте отображаются элементы от лилового до белого.
Переключатель "Использовать цвет фона ". Трехмерный холст отображает элементы, визуализированные с использованием цвета фона, определенного для каждого элемента.
Эти переключатели позволяют переключаться между вариантами и выбирать тип цвета. Тип цвета - это либо цвет, которые наиболее подходит для проекта, либо цвет, который нравится вам больше всего. Метки индекса Z добавляют визуальную информацию на трехмерный холст, поэтому, по отзывам пользователей, на вкладке индекса Z меньше цветовых параметров, чем на вкладке DOM .
Вкладка DOM
На вкладке DOM представлено общее представление отладки дерева DOM. На вкладке DOM отображаются все элементы веб-страницы на трехмерном холсте:
Координаты X и Y элемента на трехмерном холсте совпадают с координатами элемента на веб-странице. Z-координата элемента основана на глубине вложенности элемента в дереве DOM.
Уровень вложенности страницы (ползунок)
Ползунок определяет, сколько уровней дерева DOM отображается на трехмерном полотне. Значение, отображаемое рядом с ползунком, указывает максимальную глубину элементов, отображаемых на трехмерном полотне. Перетаскивание ползунка влево приводит к отслаиванию внешних слоев пока не будет достигнут установленный уровень 1вложенности , при котором отображается только самый удаленный элемент DOM. Чтобы удалить некоторые помехи, перетащите ползунок для более подробного ознакомления с тем, что происходит на нижних уровнях.
Кнопка сброса
Сбрасывает уровень вложенности для ползунка страницы до значения по умолчанию для страницы.
Тип цвета (секция)
На вкладке DOM можно выбрать одну из следующих цветовых схем, визуализирующих DOM на трехмерном холсте:
Переключатель "От лилового к белому ": на трехмерном холсте отображаются элементы от лилового до белого.
Переключатель "От синего к желтому " - На трехмерном холсте отображаются элементы в диапазоне от синего до желтого.
Переключатель радуги : на трехмерном холсте отображаются такие элементы, как фиолетовый, синий, зеленый, желтый, оранжевый и красный.
Переключатель "Использовать текстуру экрана " — отображает содержимое веб-страницы (файл цвета или изображения) на элементах.
Переключатель "Использовать цвет фона ". Трехмерный холст отображает элементы, визуализированные с использованием цвета фона, определенного для каждого элемента.
Панель инструментов над трехмерным холстом
Переснять snapshot (кнопка)
Нажмите кнопку Retake snapshot (
на вкладке DOM или на вкладке индекса Z, чтобы обновить трехмерное представление дерева DOM или дерева контекста наложения в соответствии с последним окном просмотра веб-страницы. Например, после сужения окна просмотра или при переключении на представление эмуляции устройства для эмуляции мобильных устройств (эмуляция устройств).
Если выбрана вкладка Композитные слои, эта кнопка отсутствует, так как повторное создание snapshot происходит автоматически при изменении размера окна просмотра.
Сброс представления (кнопка)
Нажмите кнопку "Сброс представления " (
чтобы сбросить сдвиг и поворот страницы.
Режим панорамирования (кнопка)
Чтобы сдвинуть страницу влево, вправо, вверх или вниз, нажмите кнопку представления панорамирования ( и перетащите страницу по трехмерному полотну в нужном направлении с помощью мыши.
Представление поворота (кнопка)
Чтобы повернуть страницу с помощью мыши, нажмите кнопку Повернуть представление ( а затем перетащите страницу по трехмерному полотну на нужный угол с помощью мыши.
Чтобы повернуть страницу с помощью клавиатуры, щелкните трехмерное полотно для перемещения на него фокуса так, чтобы появилась черная рамка, а затем нажмите клавиши со стрелками.
- Чтобы повернуть страницу по горизонтали, нажмите клавишу СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО .
- Чтобы повернуть страницу по вертикали, нажмите клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ .
Клавиши поворачивают страницу независимо от того, выбрана ли кнопка представления сдвига или поворота представления на панели инструментов.
Изоляция выбранного элемента (кнопка и раздел)
Вместо отображения всех элементов DOM страницы на трехмерном холсте можно сосредоточиться на отображении только части DOM.
Выберите элемент веб-страницы на трехмерном холсте, а затем нажмите кнопку Изолировать выбранный элемент . На 3D-холсте отображается выбранный элемент, его родительские или дочерние элементы, но остальные элементы страницы не отображаются.
Эта кнопка используется для отображения элемента, выделенного на трехмерном полотне, уменьшая при этом беспорядок, который могут создавать на нем сложные веб-страницы.
Включить родителей (флажок)
Флажок "Включить родительские элементы " определяет, отображаются ли родительские элементы выбранного элемента страницы на трехмерном полотне. Флажок "Включить родителей " установлен по умолчанию. Если этот флажок установлен, для отображения элемента и любых его родительских элементов на 3D-холсте, выберите элемент на 3D-холсте или в инструменте "Элементы ", а затем нажмите кнопку "Изолировать выбранный элемент ".
Этот флажок отображается, если выбрана вкладка индекса Z или DOM .
Включить детей (флажок)
Флажок "Включить дочерние элементы " отображается только при открытой вкладке DOM .
Чтобы отобразить только выбранный элемент DOM, а также его родительские и дочерние элементы:
- Установите флажки Включить родительские и дочерние элементы, а затем нажмите кнопку Изолировать выбранный элемент . Этот параметр используется по умолчанию.
Чтобы отобразить только выбранный элемент DOM вместе с родительскими элементами элемента, но не дочерние элементы элемента, выполните следующие действия.
- Установите флажок Включить родительские элементы , снимите флажок Включить дочерние элементы и нажмите кнопку Изолировать выбранный элемент .
Чтобы отобразить только выбранный элемент DOM вместе с дочерними элементами элемента, но не родительские элементы элемента, выполните следующие действия.
- Снимите флажок Включить родительские элементы , установите флажок Включить дочерние элементы и нажмите кнопку Изолировать выбранный элемент .
Чтобы отобразить только выбранный элемент DOM без его родительских и дочерних элементов, выполните следующие действия.
- Снимите флажки Включить родительские элементы и Включить дочерние элементы, а затем нажмите кнопку Изолировать выбранный элемент .
Элементы управления движением в правом нижнем углу
Элементы управления в правом нижнем углу трехмерного холста работают одинаково независимо от выбранной вкладки.
Ползунок масштабирования — этот способ увеличивает или уменьшает масштаб страницы, аналогично колесу прокрутки мыши или перетаскиванию двух пальцев по сенсорной панели.
Кнопка "Вверх" — перемещает страницу вверх относительно системы координат страницы.
Кнопка «Вниз» — перемещает страницу вниз относительно системы координат страницы.
Левая кнопка — перемещает страницу вправо относительно системы координат страницы.
Правая кнопка — перемещает страницу влево относительно системы координат страницы.