在 Project IDX 中调试应用

Project IDX 提供了几种不同的方式，可让您直接从工作区调试应用。对于 Web 应用和 Flutter 应用，Web 控制台和 Lighthouse 会直接集成到工作区中。Flutter 应用提供 Android 和 Web 预览，可让您在编写代码时检查和测试应用。

通过内置调试控制台，大多数常用语言还支持基于断点的更丰富的调试功能，并且可以使用 OpenVSX 中的调试程序扩展进行扩展。如需基于断点调试前端 Web 代码（例如JavaScript），您可以继续使用浏览器的内置开发者工具，例如 Chrome 的开发者工具。

预览应用

IDX 包含适用于 Web 应用（Chrome 和移动 Safari）和 Flutter 应用（iOS、Android、Chrome）的工作区内应用预览。Android 和 Chrome 预览版支持热重载和热刷新，并提供完整的模拟器功能。Safari 和 iOS 模拟器可在各种 iOS 设备上提供直观且互动的预览，并针对移动应用和 Web 应用模拟 iOS 体验。

如需详细了解 IDX 预览，请参阅预览应用。

使用集成的 Web 控制台进行网页预览

IDX 网页预览中的最小化控制台栏

集成的 Web 控制台可帮助您直接从 Web 预览中诊断应用中的问题。您可以展开底部的栏，在 IDX 网站预览面板中访问 Web 控制台。

请注意，此功能处于实验阶段，默认情况下不启用。如需开启此功能，请按以下步骤操作，并在试用后分享反馈：

  1. 将 Web 控制台添加到 IDX 工作区：

    1. 点击齿轮图标或按 Ctrl + ,（在 Windows/Linux/ChromeOS 上）或 Cmd + ,（在 macOS 上）打开设置。
    2. 找到 IDX: Web Dev Tools 设置并启用。如果您直接修改 settings.json 文件，则可以添加 "IDX.webDevTools": true。
    3. 刷新浏览器窗口以重新加载 IDX 工作区。

  2. 在 Project IDX 中打开网页预览：打开命令面板（在 Mac 上为 Cmd+Shift+P，在 ChromeOS、Windows 或 Linux 上为 Ctrl+Shift+P），然后选择 Project IDX: Show Web Preview（Project IDX：显示网页预览）。

  3. 默认情况下，网页控制台面板会在网页预览面板中最小化。点击该栏或将其向上拖动即可展开。

IDX 网站预览中的网站控制台面板的运作方式与其他控制台（例如 Chrome 开发者工具中提供的控制台）类似：

  • 在您使用应用时，该窗口中会显示 JavaScript 错误和 console.log 语句
    • 对于错误和警告，您还可以选择通过选择错误消息右侧的了解此错误按钮，从 IDX 中的 Gemini 获取帮助。
  • 您可以使用底部的提示栏，在网页预览的上下文中评估任意 JavaScript。

针对网页预览运行 Lighthouse

Lighthouse 会根据您选择的具体审核类别审核您的应用，并返回包含发现和建议的报告。您可以直接在项目 IDX 的网页预览中运行 Lighthouse 报告。

  1. 在 Project IDX 中打开网页预览：打开命令面板（在 Mac 上为 Cmd+Shift+P，在 ChromeOS、Windows 或 Linux 上为 Ctrl+Shift+P），然后选择 Project IDX: Show Web Preview（Project IDX：显示网页预览）。

  2. 点击网页预览工具栏中的 速度检查图标的图片 Run Lighthouse 图标。

  3. idx 中 Lighthouse 面板的图片 在 Lighthouse 面板中，选择所需的审核类别。您可以选择审核性能、无障碍、符合最佳实践、SEO和渐进式 Web 应用性能的报告。点击“分析”页面以生成报告。

    报告可能需要几分钟才能生成。

  4. 报告显示在 Lighthouse 面板中后，您可以查看每个审核类别的发现结果，也可以点击得分和类别名称在审核类别之间切换。

使用调试控制台

Project IDX 包含 Code OSS 中的内置调试控制台。您可以使用此控制台通过适用于大多数常见编程语言的开箱即用调试器调试应用，也可以从 OpenVSX 添加调试扩展程序。

如需自定义调试体验，您还可以将 .vscode/launch.json 文件添加到工作区并指定自定义启动配置。