预览应用

Firebase Studio 提供了多种方法，可在开发期间预览和测试应用。这包括使用 App Prototyping agent和利用内置的 Web 预览器以及 Firebase Studio 工作区内提供的 Web 预览器与 Android 预览器。

启用并配置预览环境

如果您使用模板或使用 App Prototyping agent生成应用，预览通常已经为您配置好了。如果模板尚未配置预览，您可以在项目的 Nix 配置文件中进行配置。

1. 在工作区中，打开 .idx/dev.nix。

   当您创建新的工作区时，Firebase Studio 会自动生成此文件，并根据所选模板包含相应的预览环境。如果该文件不在您的 Firebase Studio 代码库中，请创建该文件，然后将 idx.previews 属性设置为 true。随后，添加配置属性，如以下示例所示：

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   如需查看 Firebase Studio 中的完整 Nix 属性列表，请参阅 Nix + Firebase Studio。

2. 重新构建环境：

   • 从命令面板 (Cmd+Shift+P/Ctrl+Shift+P) 中，运行 Firebase Studio: Hard restart 命令。
   • 在环境配置已更新通知中，点击重新构建环境。

   在修改 dev.nix 文件并重新构建环境后，预览面板将显示在工作区中，展示 Android 和 Web 标签页，或同时展示二者，具体取决于您的启用设置。

要点：您可以点击预览窗口工具栏中的在新窗口中打开图标，在单独的浏览器标签页中预览您的应用。您还可以通过工作区共享使用此弹出式链接，向朋友或同事演示您的开发进展。如果关闭了预览并想重新打开，可以打开命令面板并搜索相应的预览命令。

使用应用预览

Firebase Studio 在将应用安装到预览环境的 Flutter 工作区中的 Chrome 和 Android 模拟器上提供 Web 预览。这样，您可以直接在工作区内对应用进行完整的端到端测试。

刷新适用于 Web 和 Android 的预览

Firebase Studio 会关联底层框架（如 npm run start 和 flutter hot-reload）的热重载功能，以便为您提供简化的内部开发循环。Firebase Studio 提供以下几种重载类型：

• 自动热重载：保存文件时，系统会自动执行热重载。热重载（有时称为热模块替换 HMR）可在不重新加载页面（针对 Web 应用）或不重启/重装应用（针对模拟器）的情况下更新应用。此方法对于保留应用的有效状态很有用，但可能并不总是按预期运行。

• 手动完全重新加载：此选项相当于刷新页面（Web 应用）或重启应用（模拟器）。建议在重构大量代码等重大变更时使用完全重新加载，以确保变更生效。

• 手动硬重启：此选项会完全重启 Firebase Studio 的预览系统，包括停止和重启应用的 Web 服务器。

所有重新加载选项均可在预览工具栏或命令面板（在 Mac 上为 Cmd+Shift+P，在 ChromeOS、Windows 或 Linux 上为 Ctrl+Shift+P）的 Firebase Studio 类别下使用。

如需使用预览工具栏，请按以下步骤操作：

1. 点击重新加载图标以刷新页面。这会强制执行完全重新加载。如需选择其他刷新类型，请点击重新加载图标旁的箭头以展开菜单。

2. 从菜单中选择所需的刷新选项：热重载、完全重新加载或强制重启。

与他人分享 Web 预览

您可以与他人分享应用的 Web 预览，以征求反馈。为此，您需要先启用访问权限，然后分享预览的直接链接：

1. 在 Web 预览工具栏中，点击地址栏右侧的 分享预览链接图标，打开分享菜单。

2. 您可以通过以下任一方式允许他人访问您的工作区：

   • 将预览设为公开：让您的工作区预览可供公开访问。这样，任何人都可以在您的工作区处于活跃状态时，通过互联网访问您的预览服务器，直到您关闭公开访问权限为止。

   • 管理工作区访问权限。仅与您信任且需要访问权限的用户共享您的工作区。

     警告：共享您的工作区会允许其他用户更改您的代码，并访问如身份验证令牌等私密信息，因此请仅与您信任的用户共享。如需了解详情，请参阅共享您的工作区。

3. 选择复制预览网址以复制工作区预览的直接链接，并发送给您希望获取反馈的人员。您还可以使用显示的二维码在移动设备上快速打开预览。

配置自动保存和热重载

默认情况下，Firebase Studio 会在您停止输入 1 秒后自动保存工作，并触发自动热重载。如果您希望 Firebase Studio 按不同的时间间隔保存工作，请更改自动保存设置。您也可以关闭自动保存功能。

配置自动保存

1. 打开 Firebase Studio。
2. 点击设置图标。
3. 搜索文件：自动保存，并验证该字段是否设置为“afterDelay”。
4. 搜索文件：自动保存延迟。
5. 输入新的自动保存延迟时间间隔（以毫秒为单位）。现在，系统会根据新的自动保存延迟设置自动保存您对工作内容所做的更改。

关闭自动保存

1. 打开 Firebase Studio。
2. 点击设置图标。
3. 搜索文件：自动保存。
4. 点击下拉菜单，然后选择关闭。

预览后端已断开连接

您可以放心地忽略“预览后端已断开连接”消息。

后续步骤

• 使用 Firebase 发布。
• 监控您的应用。