微软集成开发者工具到 Visual Studio 中，Web 工具迎来“大换血”？

原创已于 2022-03-11 09:52:01 修改 · 3.3k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-03-10 13:55:03 首次发布

微软在Visual Studio中预览了Edge开发人员工具，包括ASP.NET和ASP.NET Core项目，Elements工具支持实时编辑DOM和CSS，Network工具用于网络性能优化。开发者可直接从VS Marketplace获取这些工具，提升开发体验。

作者 | Paul Krill
编译 | 张洁

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

优快云下载自视觉中国

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

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

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

基于 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

1 条评论