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 浏览器的元素工具和网络工具。

如果不离开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 Sources 工具的代码编辑器中编辑文件。

使用此试验时，如果使用 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 网页开发。