预览应用

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 会在您停止输入一秒钟后自动保存您的工作，从而触发自动热重载。如果您想让 Firebase Studio 以不同的间隔保存您的工作，请更改自动保存设置。您也可以关闭自动保存功能。

后续步骤

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