3D 视图3D View

使用 3D 视图 通过浏览文档对象模型和 DOM (或 z 索引) 上下文来调试 Web 应用。Use the 3D View to debug your web app by navigating through the Document Object Model (DOM) or the z-index stacking context. 通过它,您可以完成以下任务。With it, you may complete the following tasks.

如果你想要探索 3D 视图项目的早期原型并自己运行代码,请导航到"3D 视图示例"。If you want to explore an early prototype of 3D View project and run the code yourself, navigate to 3D View Sample.

在左侧,有三个窗格可以用于调试体验。On the left side, there are three panes that you may use for your debugging experience.

  • Z 索引 窗格。The Z-index pane. 在 Web 应用中的不同元素中导航,并注意 z-index 上下文。Navigate through the different elements in the web app with the z-index context in mind. Z 索引窗格 是默认窗格。The Z-index pane is the default pane.
  • 3D DOM窗格。The 3D DOM pane. 通过可轻松访问的所有元素,作为一个整体探索 DOM。Explore the DOM as a whole with all the elements easily accessible. 若要访问该窗格,请选择 Z 索引 窗格旁边的 DOM 窗格。To access the pane, choose the DOM pane next to the Z-index pane.
  • 复合 层窗格The Composited Layers pane. 添加另一个 3D 元素以从层角度创建更全面的体验。Add another 3D element to create a more comprehensive experience from a layers perspective. 若要访问窗格,请选择 "DOM" 窗格旁边的"复合层"窗格。 ****To access the pane, choose the Composited Layers pane next to the DOM pane.

在右侧,画布显示来自Z 索引、3D DOM复合层的选择On the right side, the canvas displays your selections from the Z-index, 3D DOM, or Composited Layers.

3D 视图画布

键盘快捷方式Keyboard shortcuts

  • 旋转 DOM:若要水平旋转,请选择 left-arrowright-arrow 键。Rotate the DOM: To rotate horizontally, select the left-arrow and right-arrow keys. 若要垂直旋转,请选择 up-arrowdown-arrow 键。To rotate vertically, select the up-arrow and down-arrow keys.
  • 导航 DOM:若要在相邻的元素间移动,请选择一个元素,然后选择 up-arrowdown-arrow 键。Navigate the DOM: To move through the adjacent elements, choose an element and select the up-arrow and down-arrow keys.

鼠标控件Mouse controls

  • 旋转 DOM:选择并拖动画布空间。Rotate the DOM: Choose and drag around the canvas space.
  • 平移 DOM:打开上下文菜单 \ (右键单击) 并按希望 DOM 移动的方向拖动。Pan around the DOM: Open the contextual menu (right-click) and drag in the direction you want the DOM to move.
  • 缩放:在触摸板上拖动两根手指或使用鼠标上的滚动盘。Zoom: Drag two fingers across the touchpad or use the scroll wheel on your mouse.

屏幕控件On-screen controls


  • 将画布视图重置为原始视图:选择"重置**** 相机"按钮,或选择"重置视图中的元素",然后重新居中相机**\ (** 侧向刷新图标) 按钮。Reset the canvas view to the original view: Choose the Reset camera button, or choose the Reset elements in view and re-center camera (sideways refresh icon) button.
  • 刷新画布 \ (例如,如果浏览器发生更改或切换到设备仿真器视图) :选择"重新拍摄快照"按钮或选择"获取新快照****"按钮 \ (刷新**** 图标) 。Refresh the canvas (for example, if the browser changed or you switched to a device emulator view): Choose the Retake snapshot button or choose the Take new snapshot button (refresh icon).

Z 索引Z-index

Z 索引视图

虽然 Z 索引 窗格具有与 3D DOM 窗格的共享功能,但窗格仍具有该窗格特有的元素。While the Z-index pane has shared features with the 3D DOM pane, the panes still have elements that are unique to the pane.

使用堆叠上下文突出显示元素Highlight elements with stacking context

使用 堆叠上下文设置突出显示 元素允许你打开 \ (和 off) 画布上元素的 z-index 标记。The Highlight elements with stacking context setting allows you to turn on (and off) the z-index tags for the elements on the canvas. 默认情况下选中复选框。The checkbox is chosen by default.

更改你的探索范围Change the scope of your exploration

" 显示所有元素 "按钮是在更改其下方的设置后显示 DOM 的所有元素的最快方法。The Show all elements button is the quickest way to display all the elements of the DOM after changing the settings below it.

" 仅显示具有堆叠上下文 的元素"按钮删除元素而不堆叠上下文并平展 DOM 以简化导航。The Show only elements with stacking context button removes elements without stacking context and flattens the DOM for easier navigation.

" 隔离所选元素" 按钮实质上是一个中的三个按钮。The Isolate selected element button is essentially three buttons in one. "隔离所选元素"按钮下方**** 有两个复选框:"显示**** 所有父元素"复选框和"仅保留具有新堆叠上下文的父项" 复选框。There are two checkboxes below the Isolate selected element button: The Show all parents checkbox and Keep only parents with new stacking context checkbox.

默认情况下 ," 显示所有家长"复选框已打开。The Show all parents checkbox is turned on by default. 若要在画布上显示元素和任何父元素,请选择一个元素并选择"隔离 所选元素" 按钮。To display the element and any parents on the canvas, choose an element and choose the Isolate selected element button.

若要在画布上显示具有新堆叠上下文的元素和父元素,请打开"仅保留具有新**** 堆叠上下文的父元素"设置并选择"隔离所选元素 " 按钮。To display the element and the parents that have a new stacking context on the canvas, turn on the Keep only parents with new stacking context setting and choose the Isolate selected element button.

若要在画布上显示你选择的元素,请关闭这两个设置,然后选择" 隔离所选元素" 按钮。To display the element you chose on the canvas, turn off both the settings and choose Isolate selected element button.

3D DOM 窗格底部,找到"隐藏与父元素的绘制顺序相同的 元素"复选框At the bottom of the 3D DOM pane, locate the Hide elements with the same paint order as their parent checkbox. 选择并取消选中复选框将基于你的选择刷新元素。Choosing and deselecting the checkbox refreshes the elements based on your choice. 如果选中,共享绘制顺序的元素将平展到父元素。If chosen, elements that share paint order are flattened to the parent.

这些选项旨在清除一些更复杂的网页在画布上创建的混乱情况。The options are meant to clear up some of the clutter that more complex web pages create in your canvas.

Z 索引颜色类型Z-index color type

是你可能在画布中用于 DOM 的不同可视化效果。The are the different visualizations you may use for the DOM in your canvas. 无论是为了有趣还是因为可视化效果有助于更好地可视化 DOM,DevTools 都有不同的颜色通道和" 使用背景色" 选项。Whether you use it for fun or because the visualizations help you visualize the DOM better, the DevTools have different colorways and a Use background color option. Z索引窗格3D DOM窗格共享紫色到白色和背景色。 ****The Z-index pane shares the Purple to White and Background Color with the 3D DOM pane. 考虑到添加了 z 索引标签的可视元素,你的反馈导致颜色选项的数量减少。Given the added visual element of the z-index labels, your feedback that led to a reduction in the number of color options. 新的简单性改进了 z-index 调试体验。The new simplicity improves the z-index debugging experience. 单选按钮允许你切换选项并选取颜色类型。The radio buttons allow you to toggle through the options and pick the color type. 颜色类型最适用于你的项目,或最喜欢的颜色类型。The color type is either most appropriate for your project or one that you like the most.


DOM 视图

如果你想要获得更多常规调试视图,而不是 z 索引体验 ,3D DOM 会提供 DOM 的整体外观。If you want to take more of a general debugging view, rather than the z-index experience, the 3D DOM gives an overall look of the DOM. 由于删除了 z-index 上下文,因此 DOM 的堆叠更为紧密和干净。Since the z-index context is removed, the DOM is stacked more closely and cleanly. 3D DOM窗格具有类似的功能,但存在一些细微差别。The 3D DOM pane has similar functionality, but there are a few nuances.

更改视图Changing your view

3D DOM 窗格中," 隔离 所选元素"按钮具有" 包括子 元素"和" 包括父项" 复选框。On the 3D DOM pane, the Isolate selected element button has Include children and Include parents checkboxes. 默认情况下,这两个复选框都打开。Both checkboxes are turned on by default. 这意味着,如果在选择元素后**** 选择"隔离所选元素"按钮,画布将显示所选元素、元素的父元素和元素的子元素。That means if you choose the Isolate selected element button after you choose an element, the canvas displays the chosen element, the parents of the element, and the children of the element. 关闭" 包含子元素 "设置,然后再次选择" 隔离所选元素 "按钮以显示所选元素和元素的父元素。Turn off the Include children setting and choose the Isolate selected element button again to display the chosen element and the parents of the element. 如果打开" 包含 子元素"设置并关闭" 包含 父元素"设置,然后选择"隔离 所选 元素"按钮,画布将显示元素和任何子元素。If you turn on the Include children setting and turn off the Include parents setting and then choose the Isolate selected element button, the canvas displays the element and any children. 如果同时关闭这两个设置并选择" 隔离所选元素 "按钮,画布将仅显示之前选择的元素。If you turn off both settings and choose the Isolate selected element button, the canvas only displays the element you previously chose.

控件窗格上名为 "嵌套级别的页面"的滑块, 旁边有一个数字。A slider on the control pane named Nesting level for page with a number next to it. 数字指示文档的图层数。The number indicates the number of layers for the document. 向左拖动滑块会导致最外面的图层消失,直到你将嵌套层设置为 ,这将仅显示 DOM 中最远 1 的后退元素。Dragging the slider to the left causes the outermost layers to peel away until you are left with a nesting level set to 1, which displays only the furthest back element in the DOM. 若要删除某些待筛选邮件,请拖动滑块。To remove some of the clutter, drag the slider. 它可以帮助你仔细查看较低级别中发生的情况。It helps you get a closer look at what is happening in the lower levels.

DOM 颜色类型DOM color type

3D DOM窗格显示以下选项。The 3D DOM pane displays the following options.

  • 三种不同的颜色。Three different colorways.
    • 热度图 - 紫色到白色Heatmap - Purple to White
    • 热度图 - 蓝色到黄色Heatmap - Blue to Yellow
    • 热图 - 红红Heatmap - Rainbow
  • 使用背景色Use background color
  • 使用屏幕纹理Use screen texture

使用 屏幕纹理选项 将上下文添加到你的调试体验。The Use screen texture option adds context to your debugging experience. 它直接将网页中的内容显示在元素上。It directly displays the content from the webpage onto the elements.

复合层Composited layers


The Composited Layers pane opens the elements of the Layers tool without changing contexts.The Composited Layers pane opens the elements of the Layers tool without changing contexts. 你仍然可以访问每个图层的详细信息,并拥有慢速滚动****画图。You may still access the details of each of the layers and have the Slow scroll rects and Paint.

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

开发人员Microsoft Edge团队正在处理 UI,并基于你的反馈向 3D 视图添加更多功能。The Microsoft Edge Devtools team is working on the UI and adding more functionality to the 3D View based on your feedback. 发送反馈以帮助改进开发人员Microsoft Edge开发工具。Send your feedback to help improve the Microsoft Edge DevTools. 在**** DevTools 中选择"发送反馈"图标,或在 Windows/Linux 或 macOS 上选择,然后输入你的 Alt + Shift + I Option + Shift + I DevTools 的任何反馈或功能请求。Choose the Send Feedback icon in the DevTools or select Alt+Shift+I on Windows/Linux or Option+Shift+I on macOS and enter any feedback or feature requests you have for the DevTools.