小细节微软项目经理 Paul Gildea 发博说，他们针对Web开发人员，发布了一个新的VS Code扩展—— Elements for Microsoft Edge，这个扩展还是一个预览版，目的是让开发者更好地在浏览器工具和编辑器中操作和调试HTML和CSS的问题。
对Web开发人员来说，当在DevTools和IDE之间中完成相同的任务时，不同的工作流混在一起会觉得很不方便，所以 Paul Gildea提出三方面改进：
在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中。
查看示例或反馈问题地址：
https://github.com/microsoft/vscode-edge-devtools
本文由LinkNemo爬虫[Echo]采集自[https://www.ithome.com/0/433/185.htm]
