预览应用

借助 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。

重新构建您的环境：
- 从命令面板运行 Project IDX: Hard restart 命令（Cmd+Shift+P/Ctrl+Shift+P）。
- 点击环境配置已更新中的重建环境。通知。
修改 dev.nix 文件后重新构建环境时，预览面板会显示在您的工作区中，其中显示了 Android 和 Web 标签页，具体取决于您已启用的功能。但是，您可能需要等待一段时间才能重建环境。试试看关闭工作区，然后从 IDX 信息中心。

。

使用应用预览

IDX 在 Chrome 和 Android 模拟器（在 Flutter 工作区中）提供网页预览在预览环境中安装应用，以便您进行全面测试。在整个工作空间中完成所有工作

刷新网页版和 Android 版预览

IDX 接入底层框架的热重载功能（例如 npm run start 和 flutter hot-reload）开发循环。本部分介绍了不同类型的重新加载如果 IDX 上的默认行为不适合您的使用，请进行问题排查这种情况。

自动热重载：在您执行下列操作时，系统将自动执行热重载保存文件。有时称为热模块替换 (HMR)，重新加载无需重新加载页面（适用于 Web 应用）即可更新您的应用重启或重新安装应用（针对模拟器）。这种方法非常适合保持应用的实时状态，但有时。
手动完全重新加载：此选项相当于刷新页面（适用于网页应用）或应用重启（针对模拟器）。我们建议您使用完全重新加载捕获对源代码的重大更改，例如在重构时大型语言模型。
手动硬重启：此选项会执行完全重启 IDX 的预览系统，其中包括停止和重启您的应用的网络服务器

您可以使用预览工具栏或命令调色板（在 Mac 上为 Cmd+Shift+P，在 ChromeOS、Windows 或 Chrome 上按 Ctrl+Shift+P）（在 IDX 类别下）。

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

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

配置自动保存和热重载

默认情况下，当您停止输入后，IDX 会在 1 秒内自动保存您的工作，触发自动热重载。如果您希望 IDX 将您的工作内容保存到请更改自动保存设置。您也可以关闭自动保存功能。

配置自动保存

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

关闭自动保存功能

打开项目 IDX。
点击设置图标。系统会显示“设置”窗口。
搜索文件：自动保存。
点击下拉菜单，然后选择关闭。自动保存功能现已启用已停用。