在过去几个月中，我们一直与Web开发人员密切合作，通过在下一版Microsoft Edge上使用新的Chromium支持的DevTools基础来了解如何简化工作流程。我们在这些对话中听到了一个一致主题：您希望花更多时间在喜欢的编辑器中处理代码。鉴于您已经可以从VS Code调试Edge，下一个合乎逻辑的步骤是将最常用的浏览器工具Elements集成到VS Code中。

您可以在我们的新预览VS Code扩展-Elements for Microsoft Edge中尝试这一点。此扩展是一个初始预览，旨在更好地了解您在浏览器工具和编辑器中操作和调试HTML和CSS的问题。要开始使用，请下载Microsoft Edge Insider预览版本，然后安装Elements for Microsoft Edge扩展。

为什么添加元素？

我们从开发人员那里得知，在尝试通过DevTools和IDE完成相同的工作时混合不同的工作流是令人沮丧的。具体而言，我们确定了三个具有重大改进机会的领域：

• 在DevTools中修改CSS时，快速将更改带回源代码。
• 在DevTools中对HTML / CSS进行多次修改时，最大限度地减少丢失更改的可能性。
• 快速更改源代码并查看浏览器中反映的更改。

▲在VS Code中打开的Microsoft Edge扩展元素&一个网站的实时预览

VS代码扩展的元素是我们通过使您能够直接从VS代码中检查和调试DOM并实时查看更改对页面的影响来简化这些工作流的第一步。这种体验从Elements选项卡开始，因为它是Microsoft Edge DevTools系列中最常用的工具，也是VS Code，它是迄今为止Web开发人员最常用的文本编辑器。

VS Code扩展-Elements for Microsoft Edge元素 

VS Code扩展允许您在编辑器中使用浏览器的Elements工具。Elements工具将连接到Microsoft Edge实例，使您能够在不离开VS Code的情况下查看运行时的HTML结构，更改布局和修复样式问题。注意：此扩展仅支持Microsoft Edge（Chromium）

此元素具备以下功能：

• 用于在远程调试模式下启动Microsoft Edge浏览器并自动附加工具的调试配置。
• 侧栏视图，用于列出所有可调试目标，包括选项卡、扩展、服务工作者等。
• 功能齐全的Elements工具，包含HTML、CSS、辅助功能等视图。
• 屏幕播放功能，允许您在不离开VSCode的情况下查看页面。

Elements for Microsoft Edge入门

若要尝试使用Elements for Microsoft Edge扩展，请首先安装Microsoft Edge的Dev或Canary通道预览版本，然后从VS Code Marketplace 安装Elements for Microsoft Edge VS Code扩展。

安装完两个后，打开VS Code到您要处理的项目，您将看到添加到侧栏的新视图： （Microsoft Edge图标的元素）

单击此按钮将转到显示Microsoft Edge的任何可调试实例的目标列表。如果您当前没有打开可调试目标，可以单击加号（+）按钮以启动新实例并附加到该实例。或者，您可以在launch.json文件中使用任务，就像使用其他类型的调试器扩展一样。

附加到浏览器实例将打开新的“元素”工具面板，显示您的站点或应用程序的HTML文档结构和CSS样式信息。如下图所示：

如果您经常使用Microsoft Edge DevTools或其他基于Chromium的浏览器工具，则此窗口看起来应该很熟悉。您可以导航DOM的结构，查看所选元素的样式信息，更改CSS值和元素属性，以及您在浏览器中的Elements工具中使用的任何其他内容。

要在Elements扩展程序中查看您网站的实时视图，只需按“切换截屏视频”按钮即可。如下图所示：

当您对CSS和HTML进行更改时，此视图将实时更新，因此您无需离开VS代码即可查看更改如何影响您网站的布局。

Microsoft Edge扩展的元素是Microsoft的又一个新尝试，这意味着它不会是最完美的。如果您在使用过程中遇到问题，欢迎留言反馈或联系客服获得解决办法，我们将珍视您的建议和意见并反馈给厂商，以期将更完美的产品呈现给大家！

想要获得 Visual Studio 更多资源或其他相关下载的朋友，请点击这里。

想要购买正版 Visual Studio  产品的朋友，请点击这里。

有关慧都科技更多的精彩内容，请关注下方的微信公众号↓↓↓