使用 3D 视图 工具通过在 3D 空间中旋转页面来调试网页中的 DOM、z 索引和复合层问题。 3D 可视化效果可帮助你了解 DOM 树层次结构、z 索引堆叠上下文树层次结构以及页面上创建的复合层。
详细内容：
简介
使用 3D 视图 工具通过在 3D 空间中旋转页面来调试网页中的 DOM、z 索引和复合层问题。 3D 可视化效果可帮助你了解 DOM 树层次结构、z 索引堆叠上下文树层次结构以及页面上创建的复合层。
在左侧， 3D 视图 工具有 3 个选项卡：
复合层选项卡显示浏览器为网页创建的复合层。 每个图层都包括图层中内容的真实渲染，以便在 3D 空间中移动页面时获得全面的体验。
Z 索引选项卡显示堆叠上下文树的 3D 表示形式。 使用此选项卡可调试网页上的 z 索引堆叠问题。
“DOM”选项卡显示 DOM 树的 3D 表示形式。 使用此选项卡可作为一个整体浏览 DOM，并且可以轻松访问所有元素。
在右侧，3D 画布根据你选择的选项卡和选项代表网页。
视频：在 3D 中调试 Web
打开“3D 视图”工具
可以在“活动栏”或“快速视图”面板中打开 3D 视图工具。
若要获取最大的画布空间，请在“活动栏”中打开“3D 视图”工具。
要同时使用“元素”工具和“3D 视图”工具，请在“快速视图”面板中打开“3D 视图”工具。 这使你能够查看 3D 画布中表示的 DOM 树元素。 这是默认选项;在 命令菜单中， “显示 3D 视图 ”在“ 快速视图 ”面板中指示为打开。
在“活动栏”中打开“3D 视图”工具
打开想要以 3D 形式可视化的网页。 例如，使用 动物收容所 演示页面。
要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 3D 视图 ”选项卡。如果该选项卡不可见，请单击 “更多工具 ” (“
) ”按钮。 “ 3D 视图 ”选项卡将在 “活动栏”中打开：
在快速视图面板中打开 3D 视图工具
打开想要以 3D 形式可视化的网页。 例如，使用 动物收容所 演示页面。
要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
如果未显示 “快速视图 ”面板，请选择 “自定义和控制 DevTools (...) ”，然后选择“ 切换快速视图面板”。 或者，当焦点位于 DevTools 上时，按 Esc。
在 “快速视图 ”工具栏中，选择“ 3D 视图 ”选项卡。如果该选项卡不可见，请单击 “更多工具 ” (“
) ”按钮。
“3D 视图”选项卡将在“快速视图”面板中打开：
启用 WebGPU 以在没有硬件 GPU 的计算机上进行开发
3D 视图工具依赖于 WebGPU API 来访问高性能硬件 GPU。 在没有硬件 GPU 的计算机上，解决方法是仅在开发环境中启用以下标志。
这些标志不是打开 3D 视图 工具的常规先决条件。 如果该工具适用于您的计算机，请将标志保留为默认设置。
警告： 启用这些标志时要小心。 该 enable-unsafe-webgpu 标志可对不受支持的配置启用尽力而为的 WebGPU 支持，并可能向网站暴露安全问题。 仅将该标志用于自己的开发。 该 ignore-gpu-blocklist 标志会覆盖浏览器的内置软件呈现列表，从而在不支持的系统配置上启用 GPU 加速。 这些标志影响浏览器，而不仅仅是影响 3D 视图 工具。
若要尝试此解决方法：
在 Microsoft Edge 中，将任何工作保存在打开的选项卡中。
转到
edge://flags。搜索
ignore-gpu-blocklist，然后将标志设置为 “已启用”。 也可直接转到。edge://flags/#ignore-gpu-blocklist搜索
enable-unsafe-webgpu，然后将标志设置为 “已启用”。 也可直接转到。edge://flags/#enable-unsafe-webgpu“ 重启 ”按钮将显示在右下角。
单击“ 重启” 按钮。
Microsoft Edge 重启。
转到要可视化的网页。
右键单击该网页，然后选择 “检查”。
DevTools 随即打开。
打开“ 3D 视图 ”工具。
调试网页。
调试完毕后，请
edge://flags在 中将标志和enable-unsafe-webgpu标志设置为ignore-gpu-blocklist“默认 (”或“已禁用) ”，然后单击右下角的“重启”按钮。
缩放、平移和旋转 3D 画布
若要从不同角度查看网页，可以缩放、平移和旋转显示在 3D 视图 工具右侧的 3D 画布。
放大或缩小页面
若要在 3D 画布上放大或缩小网页，请使用鼠标滚轮或使用右下角的滑块。
“平移视图” (按钮)
要向左、向右、向上或向下移动页面，请单击“平移视图
) 按钮，然后用鼠标在 3D 画布上按所需方向拖动页面。
旋转视图 (按钮)
要使用鼠标旋转页面，请单击“旋转视图
) 按钮，然后用鼠标将页面在 3D 画布上按所需角度拖动。
若要使用键盘旋转页面，请在 3D 画布中单击以将焦点放在页面上以显示黑色边框，然后按箭头键。
- 若要水平旋转页面，请按 向左键 或 向右键 。
- 若要垂直旋转页面，请按 向上键 或 向下 键。
无论在工具栏中是否选择了 “平移视图 ”或 “旋转视图 ”按钮，按键都会旋转页面。
有关详细信息，请参阅本页中的以下其他部分：
“复合层”选项卡
在复合层视图中，3D 画布显示浏览器渲染引擎为网页创建的层列表。
使用“复合层”视图分析 CSS 代码创建了多少层、层有多大以及它们更改的频率。
在右侧的 3D 画布上，选择网页的元素。 在 “复合层 ”选项卡中，层树会自动扩展，层树下方的 “详细信息 ”选项卡显示有关所选层的信息：
慢速滚动矩形 (复选框)
“ 慢速滚动矩形” 复选框突出显示导致滚动缓慢的页面部分。 此复选框有助于调查性能问题。 某些网页使用 JavaScript 来检测某些页面元素上的滚动 (或触摸) ，这可能会使浏览网页的速度比平时慢。
此复选框以粉红色突出显示呈现网页的框) 可能导致这些性能问题的 (。
此复选框类似于“渲染”工具中的“滚动性能问题”复选框，它以黄色) 直接 (突出显示页面上的慢速矩形。 请参阅性能功能参考中的实时查找滚动性能问题。 这两个复选框都基于相同的调试信息，但这两种工具呈现此信息的方式不同。
绘制 (复选框)
将网页中的内容呈现 (颜色或图像文件) 到元素上。
图层扩展器树
展开此树以显示复合层列表。 单击图层以在 详细信息 信息窗格中显示有关该图层的详细信息。
详细信息 (信息窗格)
复合层窗格下方的详细信息信息窗格包含以下字段。
大小
所选复合层的宽度和高度，以及层左上角相对于页面视口左上角的位置。 例如，“1034 x 28055 (at 0， 0) ”。
撰写原因
浏览器渲染引擎创建层的原因。 例如：“次要层，用于存放可滚动的内容。”
内存估计
选定层使用的内存。 例如：“116 MB”。
绘制计数
渲染引擎绘制所选图层的次数。
Z 索引选项卡
Z 索引选项卡仅显示正在堆叠上下文或沿 z 轴定位的网页元素：
若要了解详细信息，请参阅 堆叠上下文 和在 MDN 使用 z-index 。
“显示元素”类型 (分区)
Z 索引选项卡中的“显示元素类型”部分控制在 3D 画布中显示页面的哪些元素。
“ 全部显示 ”单选按钮显示堆叠上下文元素和位于 z 轴上的元素。 此视图可用于调试 z 轴上未正确定位的元素的问题。
仅 显示堆叠上下文 单选按钮仅显示堆叠上下文的页面元素。 此视图可用于快速找出哪些元素在网页上堆叠上下文。
“ 显示 Z 索引标签” 复选框在 3D 画布中显示或隐藏 Z 索引标签。 默认情况下，此复选框处于选中状态。
分区) (颜色类型
在“ Z 索引 ”选项卡中，可以从以下配色方案中进行选择，以在 3D 画布中可视化 DOM：
紫色到白色 单选按钮 - 3D 画布显示从紫色到白色的元素。
“使用背景色”单选按钮 - 3D 画布显示使用为每个元素定义的背景色呈现的元素。
通过这些单选按钮，可以在各选项之间切换并选取颜色类型。 颜色类型最适用于你的项目，或最喜欢的颜色类型。 z 索引标签在 3D 画布上添加可视信息，因此根据用户反馈， Z 索引 选项卡中的颜色选项比 DOM 选项卡中的颜色选项少。
“DOM”选项卡
DOM 选项卡提供 DOM 树的常规调试视图。 DOM 选项卡显示 3D 画布中网页的所有元素：
元素在 3D 画布中的 X 和 Y 坐标与该元素在网页中的坐标匹配。 元素的 Z 坐标基于元素在 DOM 树中的嵌套深度。
页面 (滑块) 的嵌套级别
滑块控制在 3D 画布中显示的 DOM 树的级别数。 滑块旁边显示的值指示 3D 画布中显示的元素的最大深度。 向左拖动滑块会导致最外面的图层消失，直到你将嵌套层设置为 1，这将仅显示 DOM 中最后面的元素。 要消除一些混乱，请拖动滑块，以仔细观察较低级别中发生的情况。
重置按钮
将 页面的嵌套级别 滑块重置为页面的默认值。
分区) (颜色类型
在“ DOM ”选项卡中，可以从以下配色方案中进行选择，以在 3D 画布中可视化 DOM：
紫色到白色 单选按钮 - 3D 画布显示从紫色到白色的元素。
“从蓝色到黄色 ”单选按钮 - 3D 画布显示从蓝色到黄色的元素。
“彩虹 ”单选按钮 - 3D 画布将元素显示为紫色、蓝色、绿色、黄色、橙色和红色。
“使用屏幕纹理 ”单选按钮 - 将网页中的内容 (颜色或图像文件) 呈现到元素上。
“使用背景色”单选按钮 - 3D 画布显示使用为每个元素定义的背景色呈现的元素。
3D 画布上方的工具栏
重拍快照 (按钮)
单击重拍快照 (DOM 选项卡或 Z 索引选项卡中的
) 按钮可刷新 DOM 树或堆叠上下文树的 3D 表示，以匹配最新的网页视区。 例如，在缩小视区或切换到设备仿真视图时，每个 模拟 移动设备 (设备仿真) 。
选择“复合层”选项卡时，将省略此按钮，因为调整视口大小时会自动重新拍摄快照。
重置视图 (按钮)
单击重置 视图 按钮 (
) 重置页面的平移和旋转。
“平移视图” (按钮)
要向左、向右、向上或向下移动页面，请单击“平移视图) 按钮，然后用鼠标在 3D 画布上按所需方向拖动页面。
旋转视图 (按钮)
要使用鼠标旋转页面，请单击“旋转视图) 按钮，然后用鼠标将页面在 3D 画布上按所需角度拖动。
若要使用键盘旋转页面，请在 3D 画布中单击以将焦点放在页面上以显示黑色边框，然后按箭头键。
- 若要水平旋转页面，请按 向左键 或 向右键 。
- 若要垂直旋转页面，请按 向上键 或 向下 键。
无论在工具栏中是否选择了 “平移视图 ”或 “旋转视图 ”按钮，按键都会旋转页面。
隔离所选元素 (按钮和剖面)
可以专注于仅显示 DOM 的一部分，而不是在 3D 画布中显示页面的所有 DOM 元素。
在 3D 画布中选择网页元素，然后单击“ 隔离所选元素” 按钮。 3D 画布显示所选元素和元素的父元素或子元素，而不显示页面元素的其余部分。
使用此按钮可在 3D 画布上显示所选元素，同时减少复杂网页在 3D 画布中可能造成的混乱。
复选框 (包括父级)
“包括父元素”复选框控制所选页面元素的父元素是否显示在 3D 画布中。 默认情况下， “包括父项” 复选框处于打开状态。 选中此复选框后，若要在 3D 画布上显示元素及其任何父元素，请在 3D 画布或 “元素” 工具中选择一个元素，然后单击“ 隔离所选元素” 按钮。
选择 Z 索引 或 DOM 选项卡时，会显示此复选框。
在复选框) (包括儿童
仅当选择 DOM 选项卡时，才会显示“包括儿童”复选框。
若要仅显示所选的 DOM 元素以及元素的父元素和子元素：
- 选中“ 包括父元素” 和 “包括子元素 ”复选框，然后单击“ 隔离所选元素” 按钮。 这是默认设置。
若要仅显示所选的 DOM 元素以及元素的父元素，而不显示元素的子元素，请执行以下操作：
- 选中“ 包括父元素” 复选框，清除“ 包括子元素 ”复选框，然后单击“ 隔离所选元素” 按钮。
若要仅显示所选的 DOM 元素以及元素的子元素，而不显示元素的父元素：
- 清除“ 包括父元素” 复选框，选中“ 包含子元素 ”复选框，然后单击“ 隔离所选元素” 按钮。
若要仅显示所选的 DOM 元素，而不显示其父元素或子元素：
- 清除“ 包括父元素 ”和 “包括子元素 ”复选框，然后单击“ 隔离所选元素 ”按钮。
右下角的移动控件
无论选择哪个选项卡，3D 画布右下角的控件工作方式都相同。
缩放滑块 - 此操作可放大或缩小页面，就像使用鼠标滚轮或在触摸板上拖动两根手指一样。
向上按钮 - 相对于页面的坐标系向上移动页面。
向下按钮 - 相对于页面的坐标系向下移动页面。
向左按钮 - 相对于页面的坐标系向右移动页面。
向右按钮 - 相对于页面的坐标系向左移动页面。