用过 Firefox 的用户可能知道它的 3D 视图或 Tilt
扩展,它有助于以三维模式查看页面,不过Mozilla 删除了这个功能,在 Firefox
DevTools 中的这个功能已经不复存在了,原因是它很难维护。而微软受到 Tilt
特性的启发,在 Edge Dev/Canary 版本中添加了 3D DOM
Viewer,目前还在完善中。

“u003Cpu003EFirefox浏览器曾经提供3D视图或Tilt扩展,它帮助我们以三维模式查看网页。现在,Firefox
Devtools中不再提供该功能,Mozilla删除了该功能,因为它很难维护。受Tilt功能的启发,u003Cstrongu003E微软现在在微软Edge浏览器
Dev u002F Canary版本中发布了“3D DOM
Viewer”,目前这个功能还在开发中,但是已经可以启用。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cimg
src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRYPhS8Lr8pcNE”
img_width=”1049″ img_height=”796″
alt=”微软正在努力将3D视图功能引入Chromium Edge浏览器中”
inline=”0″u003Eu003Cimg
src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRYPhS8dBctPqQP”
img_width=”1024″ img_height=”576″
alt=”微软正在努力将3D视图功能引入Chromium Edge浏览器中”
inline=”0″u003Eu003Cpu003E在微软Edge
Chromium浏览器中启用3D视图的过程如下:u003Cu002Fpu003Eu003Cpu003E1.确保您使用的是Edge
Dev或Canary预览版本,请访问edge:u002Fu002Fflags页面,u003Cu002Fpu003Eu003Cpu003E2.搜索“Developer”并为Developer
Tools
Experiments选择“Enabled”。u003Cu002Fpu003Eu003Cpu003E3.重新启动浏览器。u003Cu002Fpu003Eu003Cpu003E4.重新启动后,单击省略号>更多工具>开发人员工具。u003Cu002Fpu003Eu003Cpu003E5.单击三个点图标以自定义和控制devtools,选择“设置”。u003Cu002Fpu003Eu003Cpu003E6.选择“实验”并选中“启用Dom
3D视图”并关闭Devtools。u003Cu002Fpu003Eu003Cpu003E7.现在访问任何网站,按Ctrl

微软项目经理Paul Gildea发博说,他们针对Web开发人员,发布了一个新的VS
Code扩展——Elements for Microsoft
Edge,这个扩展还是一个预览版,目的是让开发者更好地在浏览器工具和编辑器中操作和调试HTML和CSS的问题。

澳门新葡萄京官网首页 1

  • Shift +
    I快捷方式打开devtools,然后单击…图标并从“更多工具”菜单中选择选项,在“Console”选项下方选择“DOM
    3D视图”选项卡,单击拍摄快照,以3D形式查看网站。u003Cu002Fpu003Eu003Cpu003E微软相信DOM
    3D可以用于教育和初学者的Web开发,这个特性对于开发人员发现布局问题和零散的内容非常有用。u003Cu002Fpu003Eu003Cimg
    src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRYPVCTKD3oqQ2z”
    img_澳门新葡萄京官网首页 ,width=”700″ img_height=”444″
    alt=”微软正在努力将3D视图功能引入Chromium Edge浏览器中”
    inline=”0″u003Eu003Cimg
    src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRYPVCTfGAFy7tj”
    img_width=”545″ img_height=”468″
    alt=”微软正在努力将3D视图功能引入Chromium Edge浏览器中”
    inline=”0″u003E”‘.slice, groupId: ‘6722189577693430283

对Web开发人员来说,当在DevTools和IDE之间中完成相同的任务时,不同的工作流混在一起会觉得很不方便,所以Paul
Gildea提出三方面改进:

启动 Chromium Edge 中的 3D 视图

  • 保证所使用的是 Edge Dev 或 Canary 预览版本,访问 edge://flags 页面
  • 搜索“Developer”并对 Developer Tools Experiments 选择“enable”

澳门新葡萄京官网首页 2

  • 重新启动浏览器
  • 重新启动后,单击 Ellipsis>more Tools>Developer Tools
  • 点击三个点图标(…)来自定义和控制 DevTools,选择“设置”
  • 选择“Experiments”并检查“启用 DOM 3D 视图”并关闭 DevTools

澳门新葡萄京官网首页 3

  • 现在访问任何网站,按 Ctrl+Shift+I 快捷方式打开 DevTools,然后单击 …
    图标和从更多的工具菜单选择选项,你现在可以注意到新的“DOM 3D
    视图”选项卡后的“控制台”,点击快照,以查看网站的 3D 

微软认为,DOM 3D 对于教育和网络开发的初学者都是有用的。

来源:techdows 

在DevTools中修改CSS时,快速将更改更新到源代码

在DevTools中对HTML/CSS进行多次修改时,降低丢失更改的可能性

快速对源代码进行更改,并在浏览器中看到该更改

Elements for VS Code扩展就是简化工作流的第一步,从VS
Code中直接检查和调试DOM,并实时查看更改对页面的影响。

如果想要安装Elements for Microsoft Edge扩展,首先安装Microsoft
Edge的Dev或Canary版本,然后从VS Code市场安装Elements for Microsoft Edge
VS Code扩展,两个安装完毕后,在VS
Code中打开工作项目,之后会在侧栏看到一个新的图标:

单击这个图标将会进入目标列表,该列表将显示Microsoft
Edge的任何可调试实例。如果当前没有可调试的实例,则可以单击+按钮启动新实例并将其附加到其中。或者,可以在Launch.json文件中使用任务,就像使用其他类型的调试器扩展一样。

添加浏览器实例将打开新元素工具面板,显示站点或应用程序的HTML文档结构和CSS样式信息,如下图,如果经常使用Microsoft
Edge DevTools或其他Chromium驱动的浏览器工具,应该熟悉这个视图。

要在元素扩展中查看网站的实时视图,只需按下“Toggle
Screencast”按钮即可,这个视图将在对CSS和HTML进行更改时实时更新,因此不必离开VS
Code来查看更改情况。

Paul Gildea还表示不打算将Microsoft Edge
DevTools从浏览器中完全迁移到IDE中。

查看示例或反馈问题地址: