Microsoft Edge IDE 集成

Microsoft 工具的各种功能提供使用 Microsoft Edge、Visual Studio Code 和 Visual Studio 进行开发的集成,以开发在 Microsoft Edge 中使用和使用完全集成的产品、网页和 Web 应用。

用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展

用于Visual Studio Code的 Microsoft Edge DevTools 扩展允许你从Visual Studio Code中使用 Microsoft Edge 浏览器的 Elements 工具和网络工具。

无需离开Visual Studio Code,请使用 Microsoft Edge DevTools 附加到实例或启动 Microsoft Edge 实例,然后:

  • 查看运行时 HTML 结构。
  • 更改网页布局。
  • 更改 CSS 样式并修复样式问题。
  • 读取控制台消息。
  • 查看网络请求。

参阅适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展

在 Visual Studio Code 中的打开源文件

Visual Studio Code试验中的开源文件允许你使用 Microsoft Edge DevTools,但随后在 Visual Studio Code 而不是 DevTools 工具的代码编辑器中编辑文件。

使用此试验时,如果使用Visual Studio Code,并且使用 DevTools 更改 CSS 规则,则不再需要在 DevTools 的源工具中使用代码编辑器。 只需在Visual Studio Code中使用代码编辑器即可。 启用此试验时,本地文件将获得不同的处理方法。

请参阅Visual Studio Code中打开源文件

在 Visual Studio Code 中调试 Microsoft Edge

Visual Studio Code包含 Microsoft Edge 的内置调试器,可启动浏览器或附加到已运行的浏览器。

借助此内置调试器,可以逐行调试前端 JavaScript 代码,并直接从Visual Studio Code查看console.log()语句。

请参阅Visual Studio Code中的“调试 Microsoft Edge”。

Visual Studio Code的 webhint 扩展

使用 Webhint(一种可自定义的 Linting 工具)来改进网站的功能,包括:

  • 辅助功能。
  • 性能。
  • 跨浏览器兼容性。
  • PWA 兼容性。
  • 安全性。

webhint 检查代码是否存在最佳做法和常见错误。 识别并修复文件中的问题,包括 HTML、CSS、JavaScript 和 TypeScript。 提示在文本编辑器中显示为波浪下划线,并汇总在 “问题 ”窗格中。

注意: 自 2022 年 4 月起,不再维护Visual Studio Code的 webhint 扩展。 参阅适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展

用于 Web 开发的Visual Studio

Microsoft Visual Studio 是 IDE) (集成开发环境。 使用它来编辑、调试、生成和发布 Web 应用。 这是一个功能丰富的程序,可用于 Web 开发的许多方面。

除了大多数 IDE 提供的标准编辑器和调试器外,Visual Studio 还包括用于简化开发过程的功能,包括:

  • 编译 器。
  • 代码完成工具。
  • 图形设计器。
  • 还有更多功能。

请参阅 Visual Studio 进行 Web 开发