预览应用

借助 Project IDX，您可以渲染应用的实时视图和代码编辑器，从而预览工作。IDX 网页预览会呈现应用网络服务器的内嵌框架 (iFrame) 以及云端 Android 模拟器。

启用并配置预览环境

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

在 .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";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

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

重新构建您的环境：
- 从命令面板 (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 的预览系统，其中包括停止和重启应用的 Web 服务器。

您可以使用预览工具栏或命令面板（在 Mac 上按 Cmd+Shift+P，或者在 ChromeOS、Windows 或 Linux 上按 Ctrl+Shift+P）的 IDX 类别下找到所有重新加载选项。

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

点击重新加载图标即可刷新页面。这会强制完全重新加载。对于其他类型的刷新，请点击重新加载图标旁边的箭头以展开菜单。
从菜单中选择所需的刷新选项：热重载、完全重新加载或硬重启。

配置自动保存和热重载

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

配置自动保存功能

打开 Project IDX。
点击设置图标。系统会显示“设置”窗口。
搜索 Files: Auto Save 并验证该字段已设置为 `afterDelay`。
搜索 Files: Auto Save Delay。系统会显示“Auto Save Delay”（自动保存延迟）字段。
输入新的自动保存延迟间隔（以毫秒为单位）。现在，系统会根据新的自动保存延迟设置自动保存对工作的更改。

关闭自动保存功能

打开 Project IDX。
点击设置图标。系统会显示“设置”窗口。
搜索 Files: Auto Save。
点击下拉菜单，然后选择关闭。自动保存功能现已停用。