在Chromium Microsoft Edge中试用Microsoft的DOM 3D Viewer

　　在Chromium Microsoft Edge中试用Microsoft的DOM 3D Viewer

　　作为迁移到Chromium的一部分，Microsoft有机会尝试各种功能，这些功能最终也可以用于浏览器的生产版本。

　　Microsoft Edge Dev和Canary版本的最新成员称为3D DOM Viewer，它为开发人员提供了在浏览器中使用DOM层次结构的替代方法。

　　微软表示，它的想法是基于Mozilla自己的Tilt扩展，​​该公司在讨论这一最新Edge功能时称之为“非常棒”。

　　“这个Dom 3D View原型基于Tilt，提供了一种可视化DOM层次结构的不同方法。而不是像在Elements工具中那样读取xml树，你可以看到嵌套元素的图形表示，“Microsoft Edge工程师在链接页面上解释。

　　虽然DOM 3D查看器主要用于教育和初学者，他们现在是Web开发领域的第一步，但微软工程师表示，这个实验目前有一系列限制，如下所示：

　　•隔离元素并查看其父子关系

　　•单击元素以将其源代码聚焦在“元素”面板上

　　•使用热图颜色选项查找重型嵌套区域

　　•查找屏幕外元素

　　•使用鼠标进行缩放和平移以更改视图透视

　　•使用箭头键旋转相机

　　启用3D DOM Viewer并不需要花费很多时间，而且只涉及激活专用标志，该标志是Chromium Microsoft Edge Dev和Canary的最新版本的一部分。

　　注意：此处的步骤适用于Windows和Mac，只要安装了Edge的最新预览版本即可。

　　首先，您需要在Microsoft Edge中启用实验性开发人员工具，为此，您将通过键入以下命令启动标记屏幕：

　　edge://flags

　　然后使用以下短语搜索标志：

　　Developer Tool experiments

　　您会注意到，为了保存您的设置，必须重新启动浏览器。

　　再次加载浏览器时，按键盘上的F12键启动开发人员工具，然后转到以下位置：

　　Microsoft Edge > Developer Tools > Settings > Experiments

　　您正在寻找的选项称为：

　　Enable DOM 3D View

　　检查这个选项，这就是它。微软解释说这是一项正在进行的工作，所以虽然基础应该已经存在，但你可能会错过一两个功能。对于我们技术更强的读者，Microsoft工程师在链接页面上解释了这个新功能的工作原理：

　　“面板有一个带控件的侧边栏和一个带有画布的主视图。它侦听SDK.DOMModel.Events.DocumentUpdated以将视图重置为空白。调用DOMSnapshot.getSnapshot以获取Dom模型。解析Dom模型数据并用于使用Babylon.js创建3D场景。渲染引擎将内容显示在画布上。“

　　目前，重要的是要记住Microsoft Edge仍处于预览阶段，因此虽然这只是一个实验，但不能保证它也会进入浏览器的生产版本。正如我之前所说的那样，微软在计划完成微软边缘的工作时仍然守口如瓶，但有传言称该浏览器可能会在2020年春季完成，届时该公司将推出20H1功能更新。