预览应用

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. 重新构建您的环境：

   • 在 Command Palette (Cmd+Shift+P/Ctrl+Shift+P) 中，运行 Firebase Studio：强制重启命令。
   • 在环境配置已更新通知中，点击重新构建环境。

   修改 dev.nix 文件后，当您重新构建环境时，工作区中会显示预览面板，其中会显示 Android 和/或 Web 标签页，具体取决于您启用了哪些平台。

使用应用预览

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

刷新网页版和 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 预览，以征求反馈。具体方法是启用访问权限，然后分享指向预览的直接链接：

1. 在网页预览工具栏中，点击地址栏右侧的 Share Preview Link 图标，打开分享菜单。

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

   • 将预览设为公开：将您的工作区预览设为公开。这样，在您的 Workspace 处于活跃状态且您尚未关闭公开访问权限期间，互联网上的任何人都可以访问您的 Workspace 上运行的预览服务器。

   • 管理工作区访问权限。仅与您要授予访问权限的人员共享您的工作区。

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

配置自动保存和热重载

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

后续步骤

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