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

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

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

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

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

如果想要安装 Elements for Microsoft Edge 扩展，首先安装 Microsoft Edge 的

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

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

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

https://github.com/microsoft/vscode-edge-devtools

(文/开源中国)