预览应用

Firebase Studio 提供预览器，可在代码编辑器旁实时显示应用的预览效果。

启用并配置预览环境

如果您使用的是模板，预览通常已为您预配置。如果模板尚未配置预览，您可以在项目的 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 按不同的时间间隔保存工作，请更改自动保存设置。您也可以关闭自动保存功能。

后续步骤

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