借助 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。
- 点击下拉菜单,然后选择关闭。自动保存功能现已停用。