在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的最新版本的一部分。

注意：此处的步骤适用于win和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功能升级。