使用 3D 视图 工具调试 Web 应用，方法是在 3D 空间中旋转页面，获取以层表示的网页的透视。 3D 可视化效果可帮助你了解网页的 DOM 层次结构，包括 z 索引层。

在左侧， 3D 视图 工具有 3 个选项卡：

“ 复合层 ”选项卡显示网页（包括图像）的真实呈现，以便在 3D 空间中移动页面时获得全面体验。

Z 索引 选项卡。浏览网页的元素，并强调 z 索引层上下文。 使用此选项卡或视图基于 z 索引堆叠上下文调试网页。

“ DOM ”选项卡。浏览 DOM 作为一个整体，所有元素都易于访问。 浏览网页的所有元素，并将其转换为 3D 透视。

在右侧，3D 画布根据你选择的选项卡和选项来表示网页。

缩放、平移和旋转 3D 画布

放大或缩小页面

若要在 3D 画布上放大或缩小网页，请使用鼠标滚轮，或使用右下角的滑块。

平移视图 (按钮)

若要向左、向右、向上或向下移动页面，请单击“ 平移视图 ” (“) ” 按钮，然后使用鼠标按所需方向拖动 3D 画布上的页面。

“旋转视图 (”按钮)

若要使用鼠标旋转页面，请单击“ 旋转视图 ” ( ) 按钮，然后使用鼠标以所需角度拖动 3D 画布上的页面。

若要使用键盘旋转页面，请在 3D 画布中单击，将焦点放在该画布上，以便显示黑色边框，然后按箭头键。

若要水平旋转页面，请按 向左键 或 向右键 。

若要垂直旋转页面，请按 向上键 或 向下键 。

无论在工具栏中选择了 “平移视图 ”还是“ 旋转视图 ”按钮，键都会旋转页面。

有关详细信息，请参阅此页中的其他以下部分：

3D 画布上方的工具栏

右下角的移动控件

“复合层”选项卡

在“复合层”视图中，3D 画布显示浏览器呈现引擎为网页创建的层列表。

使用“复合层”视图可以分析 CSS 代码创建的层数、层大小及其更改频率。

在右侧的 3D 画布上，选择网页的元素。 在“ 复合层 ”选项卡中，层树会自动展开，层树下的“ 详细信息 ”选项卡显示有关所选图层的信息。

慢速滚动 (复选框)

“ 慢速滚动退退 ”复选框突出显示导致滚动速度缓慢的页面部分。 此复选框有助于调查性能问题。 某些网页使用 JavaScript 来检测某些页面元素的滚动 (或触摸) ，这可能会使滚动浏览网页的速度比平常慢。

此复选框突出显示粉红色 () 可能导致这些性能问题的呈现网页的框。

此复选框类似于 “呈现 ”工具中的 “滚动性能问题 ”复选框，该复选框突出显示了页面上的慢速， (黄色) 。 请参阅性能 功能参考 中的实时查找滚动性能问题 。 这两个复选框都基于相同的调试信息，但这两个工具以不同的方式呈现此信息。

绘制 (复选框)

将网页中的内容 (颜色或图像文件) 呈现到元素上。

层扩展器树

展开此树以显示复合层的列表。 单击某个层，在“详细信息信息”窗格中查看有关该层的详细信息。

详细信息信息窗格

所选复合层的宽度和高度，以及层左上角相对于页面视区左上角的位置。 例如，“1034 x 28055 (为 0， 0) ”。

浏览器呈现引擎创建层的原因。 例如：“第二层，用于容纳可滚动的内容。”

所选层消耗的内存。 例如：“116 MB”。

呈现引擎绘制所选图层的次数。

Z 索引 选项卡中的 “显示元素类型 ”部分控制在 3D 画布中显示的页面元素。

“ 全部显示 ”单选按钮显示页面的所有元素。 此视图是在更改其他 3D 显示设置后显示所有页面元素的最快方法。

“ 仅显示堆叠上下文 ”单选按钮仅显示与 z 索引堆叠相关的页面元素。 此视图删除不参与堆叠上下文的元素，并平展 DOM 以在 3D 画布中生成更轻松的导航。

“显示 z 索引标签 ”复选框显示或隐藏 3D 画布中的 z 索引标签。 默认情况下，此复选框处于选中状态。

颜色类型 (部分)

在 Z 索引 选项卡中，可以从以下配色方案中进行选择，以可视化 3D 画布中的 DOM：

紫色到白色 单选按钮 - 3D 画布显示从紫色到白色的元素。

使用背景色 单选按钮 - 3D 画布显示使用为每个元素定义的背景色呈现的元素。

通过这些单选按钮，可以切换选项并选择颜色类型。 颜色类型最适用于你的项目，或最喜欢的颜色类型。 z 索引标签在 3D 画布上添加视觉信息，因此，根据用户反馈， “Z 索引 ”选项卡中的颜色选项比“ DOM ”选项卡中的颜色选项少。

DOM 选项卡

DOM 选项卡提供常规调试视图，而不是专注于 z 索引。 DOM 与 Z 索引 选项卡中相比，DOM 的堆叠更紧密、更干净，因为 3D 画布上没有 z 索引上下文标签。

页面 (滑块) 的嵌套级别

滑块旁边的数字指示文档的层数。 向左拖动滑块会导致最外层剥落，直到将嵌套级别设置为 1 ，该级别在 DOM 中仅显示最远的元素。 若要删除某些待筛选邮件，请拖动滑块。 它可以帮助你仔细查看较低级别中发生的情况。

将页面滑块 的嵌套级别 重置为页面的默认值。

颜色类型 (部分)

在“ DOM ”选项卡中，可以选择以下配色方案，在 3D 画布中可视化 DOM：

紫色到白色 单选按钮 - 3D 画布显示从紫色到白色的元素。

蓝色到黄色 单选按钮 - 3D 画布显示从蓝色到黄色的元素。

彩虹 单选按钮 - 3D 画布将元素显示为紫色、蓝色、绿色、黄色、橙色和红色。

使用屏幕纹理 单选按钮 - 将网页中的内容 (颜色或图像文件) 呈现到元素上。

使用背景色 单选按钮 - 3D 画布显示使用为每个元素定义的背景色呈现的元素。

3D 画布上方的工具栏

“重拍快照 (”按钮)

单击“ 重拍快照 ( ) 按钮可重新加载 DOM 以匹配最新的网页视区。 例如，在使视区变窄或切换到设备仿真视图后，根据 模拟移动设备 (设备仿真) 。

选择“ 复合层 ”选项卡时，会省略此按钮，因为在重设视区大小时自动执行快照。

“重置视图 (”按钮)

单击“ 重置视图 ”按钮 ( ) 重置页面的平移和旋转。

平移视图 (按钮)

若要向左、向右、向上或向下移动页面，请单击“ 平移视图 ” (“) ” 按钮，然后使用鼠标按所需方向拖动 3D 画布上的页面。

“旋转视图 (”按钮)

若要使用鼠标旋转页面，请单击“ 旋转视图 ” ( ) 按钮，然后使用鼠标以所需角度拖动 3D 画布上的页面。

若要使用键盘旋转页面，请在 3D 画布中单击，将焦点放在该画布上，以便显示黑色边框，然后按箭头键。

若要水平旋转页面，请按 向左键 或 向右键 。

若要垂直旋转页面，请按 向上键 或 向下键 。

无论在工具栏中选择了 “平移视图 ”还是“ 旋转视图 ”按钮，键都会旋转页面。

隔离所选元素 (按钮和节)

可以专注于仅显示 DOM 的一部分，而不是在 3D 画布中显示页面的所有 DOM 元素。

在 3D 画布中选择网页的元素，然后单击“ 隔离所选元素 ”按钮。 3D 画布显示所选元素和元素的父元素或子元素，而不显示其余页面元素。

使用此按钮可在 3D 画布上显示所选元素，同时减少复杂网页可以在 3D 画布中创建的混乱。

将父 (复选框)

“ 包括父 元素”复选框控制是否在 3D 画布中显示所选页面元素的父元素。 默认情况下， “包括父项 ”复选框处于打开状态。 选中此复选框后，若要在 3D 画布上显示元素及其任何父元素，请在 3D 画布或 “元素 ”工具中选择一个元素，然后单击“ 隔离所选元素 ”按钮。

选中 Z 索引 或 DOM 选项卡时，将显示此复选框。

) 包含子级 (复选框

仅当选择了 “DOM ”选项卡时，才会显示“ 包括子 级”复选框。

若要仅显示所选的 DOM 元素，以及 元素的 父级和子级：

选中“ 包括父元素 ”和“ 包括子 元素”复选框，然后单击“ 隔离所选元素 ”按钮。 这是默认设置。

若要仅显示所选的 DOM 元素，以及元素的父元素，但不显示元素的子元素：

选中“ 包括父元素 ”复选框，清除 “包括子 元素”复选框，然后单击“ 隔离所选元素 ”按钮。

若要仅显示所选的 DOM 元素，以及元素的子元素，但不显示元素的父元素，

清除 “包括父元素 ”复选框，选中“ 包括子 元素”复选框，然后单击“ 隔离所选元素 ”按钮。

若要仅显示所选的 DOM 元素，而不显示其父元素或子元素，

清除 “包括父元素 ”和“ 包括子 元素”复选框，然后单击“ 隔离所选元素 ”按钮。

右下角的移动控件

无论选择哪个选项卡，3D 画布右下角的控件的工作方式相同。

缩放滑块 - 这会放大或缩小页面，与鼠标滚轮相同，或将两根手指拖过触摸板。

向上按钮 - 相对于页面的坐标系向上移动页面。

向下按钮 - 相对于页面的坐标系向下移动页面。

左按钮 - 相对于页面的坐标系向右移动页面。

向右按钮 - 相对于页面的坐标系向左移动页面。

MDN > Web API > 文档对象模型 (DOM)

MDN > CSS 参考 > z-index