预览应用

借助 Project IDX，您可以通过与代码编辑器一起呈现应用的实时视图来预览工作成果。IDX Web 预览会呈现应用的 Web 服务器和基于云的 Android 模拟器的内嵌框架 (iFrame)。

启用并配置预览环境

如需在工作区中预览应用，您必须配置预览环境。

1. 在 .idx/dev.nix 配置文件中启用预览。IDX 会在您创建新工作区时自动生成此文件，并根据您选择的模板添加所有适用的预览环境。如果该文件不在您的 IDX 代码库中，请创建该文件。将 idx.previews 属性设置为 true 并添加配置属性，如以下示例所示：

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in IDX, see
     # https://developers.google.com/idx/guides/customize-idx-env
   
     # 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";
         };
       };
     };
   }
   

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

2. 重新构建您的环境：

   • 从 Command Palette（Cmd+Shift+P/Ctrl+Shift+P）运行 Project IDX: Hard restart 命令。
   • 在环境配置已更新通知中，点击重新构建环境。

   修改 dev.nix 文件后，当您重新构建环境时，预览面板会显示在您的工作区中，其中会显示 Android 和 Web 标签页，具体取决于您启用了哪些平台。但是，您可能需要等待环境重建。请尝试关闭工作区，然后从 IDX 信息中心重新打开。

要点 ：您可以点击预览窗口工具栏中的在新窗口中打开图标，在单独的浏览器标签页中预览应用。此弹出式链接还可用于通过工作区共享功能向朋友或同事演示您正在进行的工作。

使用应用预览

IDX 在 Chrome 和 Android 模拟器（在 Flutter 工作区中）提供网页预览，这些模拟器会将您的应用安装在预览环境中，因此您可以直接从工作区进行端到端完整测试。

刷新网页版和 Android 版预览

IDX 会钩入底层框架（例如 npm run start 和 flutter hot-reload）的热重载功能，以便您获得紧密的内部开发循环。本部分介绍了不同类型的重载，以便在 IDX 的默认行为不适合您的用例时帮助您进行问题排查。

• 自动热重载：当您保存文件时，系统会自动执行热重载。热重载有时也称为热模块替换 (HMR)，它可在不重新加载网页（对于 Web 应用）或不重启或重新安装应用（对于模拟器）的情况下更新应用。此方法非常适合保留应用的实时状态，但有时可能无法按预期运行。

• 手动完全重新加载：此选项相当于刷新页面（对于 Web 应用）或应用重启（对于模拟器）。我们建议您使用完整重新加载来捕获源代码的重大更改，例如重构大量代码时。

• 手动硬重启：此选项会执行完全重启 IDX 预览系统的操作，包括停止和重启应用的网络服务器。

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

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

1. 点击reload图标即可刷新页面。这会强制完全重新加载。 如需进行其他类型的刷新，请点击“重新加载”图标旁边的箭头以展开菜单。

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

   

与他人共享网页预览

您可以授予访问权限，然后分享指向预览的直接链接，与他人分享应用的 Web 预览以征求反馈：

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

   

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

   • 选项 A：选择公开预览，将工作区预览设为可公开访问。这样一来，互联网上的任何人都可以在您的工作区处于活跃状态时访问工作区正在运行的预览服务器，直到您关闭公开访问权限为止。

   • 选项 B：选择管理工作区访问权限，仅与您要授予访问权限的用户共享您的工作区。

     警告 ：这样一来，这些用户将能够更改您的代码并访问其他私密信息（如工作区中保存的身份验证令牌），因此请仅与您信任的人分享这些信息。如需了解详情，请参阅共享工作区。

3. 选择复制预览网址可复制指向工作区预览的直接链接，然后将该链接发送给您希望获得反馈的人员。

配置自动保存和热重载

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

配置自动保存

1. 打开项目 IDX。
2. 点击设置图标。系统会显示“设置”窗口。
3. 搜索 Files: Auto Save，然后验证该字段是否设置为 `afterDelay`。
4. 搜索 Files: Auto Save Delay（文件：自动保存延迟）。系统会显示“Auto Save Delay”（自动保存延迟）字段。
5. 输入新的自动保存延迟间隔（以毫秒为单位）。 现在，系统会根据新的自动保存延迟设置自动保存您对工作所做的更改。

关闭自动保存

1. 打开 Project IDX。
2. 点击设置图标。系统随即会显示“设置”窗口。
3. 搜索文件：自动保存。
4. 点击下拉菜单并选择关闭。自动保存现已停用。