为什么添加元素/strong>
我们从开发人员那里得知，在尝试通过DevTools和IDE完成相同的工作时混合不同的工作流是令人沮丧的。具体而言，我们确定了三个具有重大改进机会的领域：
- 在DevTools中修改CSS时，快速将更改带回源代码。
- 在DevTools中对HTML / CSS进行多次修改时，最大限度地减少丢失更改的可能性。
- 快速更改源代码并查看浏览器中反映的更改。
▲在VS Code中打开的Microsoft Edge扩展元素&一个 站的实时预览
VS Code扩展-Elements for Microsoft Edge元素
此元素具备以下功能：
- 用于在远程调试模式下启动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 产品的朋友，请点击这里。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！