在 Project IDX 中调试应用

Project IDX 提供了几种直接从工作区调试应用的不同方法。Web 应用和 Flutter 应用在您的工作区的 Chrome 网页预览中提供 Lighthouse 和 Chrome 开发者工具。Flutter 应用提供 iOS、Android 和 Web 预览版，可让您在编写代码时抽查和测试您的应用。内置的调试控制台支持对大多数常用语言进行自动调试，还支持在工作区的 launch.json 文件中定义自定义调试。

预览应用

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

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

使用 Chrome 开发者工具进行网页预览（实验性）

Chrome 开发者工具可帮助您直接通过网页预览诊断应用中的问题。您可以像从 Chrome 浏览器打开开发者工具一样，在 IDX 网页预览面板中访问 Chrome DevTools。IDX 网页预览中的开发者工具面板最小化

此功能处于实验阶段，我们正在努力打造理想的用户体验。请向我们发送反馈，帮助我们改进服务。

  1. 将 Chrome 开发者工具添加到您的 IDX 工作区：

    1. 点击齿轮图标、Ctrl + ,（在 Windows/Linux/ChromeOS 上）或 Cmd + ,（在 MacOS 上），打开设置窗口。
    2. 找到 IDX：Web 开发者工具设置，然后选择为网页预览启用 Chrome 开发者工具（需要重新加载浏览器）。如果您使用 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。

  3. 开发者工具面板已在网页预览面板中最小化。点击开发者工具栏以展开面板，然后在网页预览面板内使用开发者工具。

您可以在 IDX 网页预览中使用开发者工具面板，就像在 Chrome 浏览器中调试应用一样。

运行 Lighthouse 以进行网页预览

Lighthouse 会根据您选择的特定审核类别审核您的应用，并返回包含发现结果和建议的报告。您可以直接通过 Project IDX 中的网页预览来运行 Lighthouse 报告。

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

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

  3. IDX 中的灯塔面板图片 在“Lighthouse”面板中，选择所需的审核类别。您可以从评估性能、无障碍功能、是否符合最佳做法、搜索引擎优化 (SEO) 和渐进式 Web 应用性能的报告中进行选择。点击分析页面以生成报告。

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

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

使用调试控制台

Project IDX 包含 Code OSS 的内置调试控制台。使用此控制台使用开箱即用的调试程序调试您的应用（适用于大多数常用编程语言），或者添加来自 VSCode Marketplace 的调试扩展程序。

如果要编写自定义调试代码，请将 launch.json 文件添加到工作区。