在 Firebase Studio 中调试应用

Firebase Studio 提供了几种不同的方法，可让您直接在工作区内调试应用。对于 Web 应用和 Flutter 应用，Web 控制台和 Lighthouse 会直接集成到 Workspace 中。Flutter 应用提供 Android 和 Web 预览，可让您在编写代码时对应用进行抽查和测试。

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

预览应用

Firebase Studio 包含适用于 Web 应用 (Chrome) 和 Flutter 应用 (Android、Chrome) 的工作区内应用预览。Android 和 Chrome 预览版支持热重载和热刷新，并提供完整的模拟器功能。

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

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

Firebase Studio Web 预览中的最小化控制台栏

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

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

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

    1. 点击 或按 Ctrl + ,（在 Windows/Linux/ChromeOS 上）或 Cmd + ,（在 MacOS 上）打开设置。
    2. 找到 Firebase Studio：Web 开发者工具设置，然后将其启用。如果您直接修改 settings.json 文件，则可以添加 "IDX.webDevTools": true。
    3. 刷新浏览器窗口以重新加载 Firebase Studio 工作区。

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

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

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

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

针对网页预览运行 Lighthouse

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

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

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

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

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

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

使用调试控制台

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

如需自定义调试体验，您还可以向工作区添加 .vscode/launch.json 文件并指定自定义启动配置。如需详细了解如何使用启动配置文件自定义调试，请参阅 Visual Studio Code 调试配置。

使用 Gemini 进行调试

您可以在 Firebase 中使用 Gemini，通过 Code 工作区或 App Prototyping agent 中的聊天功能调试代码。

虽然 Gemini 可以为您编写代码，但有时也可能会出错。当检测到错误时，它会尝试进行修复。如果您发现无法根据错误消息解决问题，可以尝试以下某些方法：

  • 描述问题：在聊天界面中，尽可能清晰简洁地描述您遇到的问题。虽然 Gemini 可能有权访问错误消息和日志等上下文，但可能无法理解完整的上下文。描述行为以及错误消息有助于 Gemini 更快地修正错误。

  • 提出具体问题：不要害怕直接询问代码相关问题。Gemini例如，“什么可能导致此函数中出现 null 指针异常？”或“如何防止这种竞态条件？”

  • 将复杂问题分解：如果您要处理复杂的问题，请将其分解为更易于管理的较小部分。让 Gemini 帮助您分别调试每个部分，并逐步思考问题。

  • 使用代码方括号：分享代码段时，请使用代码方括号以确保代码格式正确无误。这样可以让 Gemini 更轻松地读取和理解您的代码。

  • 迭代和优化：Gemini 可能并不总能在第一次尝试时提供完美的解决方案。查看回答，提出澄清性问题，并根据需要提供更多信息。

  • 避免提示循环：如果 Gemini 陷入循环或无法回答您的问题，请尝试换种说法重复提示或提供更多背景信息。有时，只需改换一下问题的措辞，就能帮助 Gemini 理解您想要询问的内容。

    如果重新措辞提问无法解决循环问题，请尝试以下技巧：

    • 发起新对话：如果您在 Code 工作区中使用 Gemini in Firebase 聊天功能，请发起新聊天会话以重置 Gemini 的上下文。这有助于消除 Gemini 在之前对话中可能犯下的任何错误观念或假设。

    • 提供反例：如果 Gemini 做出了错误的假设，请提供反例来帮助它了解正确的行为。