作者 | Paul Krill
编译 | 张洁

为了提高 Web 开发人员的工作效率，微软已开始将 Edge 开发人员工具集成到 Visual Studio 中，方便开发人员使用。从而，开发人员可以从 Visual Studio Marketplace 中下载合适的开发人员工具。

3 月 7 日，微软在 IDE （集成开发环境）中发布 ASP.NET 和 ASP.NET Core 项目预览版。 除了 Web 应用预览之外，微软还带来了 Elements 工具和 Network 工具。

用 Elements 工具编辑，在浏览器里面能得到反馈

使用Elements工具可以检查、编辑和调试 HTML 和 CSS，此外还支持 CSS flexbox 和 CSS 网格功能。在查找网页源代码 HTML 中的任一元素时,可以手动修改任一元素的属性和样式，并且能实时在浏览器里面得到相应的反馈。

在 Elements 面板中，可以实时编辑 DOM 节点和 CSS 样式。只要双击 DOM 树视图里面的节点，就可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面。这个工具大大提高了开发人员工作效率，同时使用起来也非常的方便。

Network 工具对网络性能进行优化

基于 Network 工具，开发人员可以检查网络活动并模拟不同的网络条件。使用 Network 工具要确保按预期下载或上传资源，并且还要检查单个资源的属性，例如 HTTP 标头、内容或大小。 现阶段，预览版尚不支持使用 Blazor 工具构建的项目。

Network 面板可以记录页面上的网络请求的详情信息，从发起网页页面请求 Request 后分析 HTTP 请求后收到包括状态、资源类型、大小、所用时间等请求资源信息，可以根据这个进行网络性能优化。

对于想要尝鲜的开发者，可以从 https://visualstudio.microsoft.com/zh-hans/downloads/ 下载使用起来啦！

参考链接：https://www.infoworld.com/article/3652526/microsoft-previews-edge-developer-tools-for-visual-studio.html