预览应用

借助 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 工作区中）上提供 Web 预览，这些预览会在预览环境中安装您的应用，以便您直接在工作区中对其进行端到端完整测试。

刷新网页版和 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 类别来使用所有重新加载选项。

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

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

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

    预览工具栏位于预览面板的顶部

与他人分享您的网页预览

您可以与他人分享应用的 Web 预览，以征求反馈。具体方法是启用访问权限，然后分享指向预览的直接链接：

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

    预览“分享”菜单

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

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

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

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

配置自动保存和热重载

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

配置自动保存

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

关闭自动保存

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