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)。
- 在「Environment config updates」通知中按一下「Rebuild 環境」。
修改
dev.nix
檔案後重新建構環境時,工作區會顯示「Android」和「Web」分頁 (視已啟用的項目而定)。但是,系統可能需要一段時間才能重建環境。請嘗試關閉工作區,然後從 IDX 資訊主頁重新開啟。
使用應用程式預覽功能
IDX 在 Chrome 和 Android 模擬器 (在 Flutter 工作區上) 上提供網頁預覽,可在預覽環境中安裝應用程式,因此您可以直接從工作區完整測試。
重新整理網頁和 Android 版預覽畫面
IDX 會運用基礎架構的熱重新載入功能 (例如 npm run start
和 flutter hot-reload
),提供緊密的內部開發迴圈。本節說明不同類型的重新載入作業,協助您排解 IDX 的預設行為不適用於您的用途時的問題。
自動熱重新載入:儲存檔案時,系統會自動執行熱重新載入。有時也稱為「熱門模組替換」 (或 HMR)。熱重新載入會更新應用程式,而不必重新載入網頁 (適用於網頁應用程式),也不會重新啟動或重新安裝應用程式 (模擬器專用)。這個方法非常適合用來保留應用程式即時狀態,但有時可能無法發揮預期效果。
手動完整重新載入:這個選項相當於頁面重新整理 (適用於網頁應用程式) 或重新啟動應用程式 (模擬器專用)。我們建議使用完整重新載入功能擷取原始碼的重要變更,例如在重構大量程式碼時。
手動硬重新啟動:這個選項會執行完整重新啟動 IDX 的預覽系統,包括停止及重新啟動應用程式的網路伺服器。
所有重新載入選項都可在「IDX」類別底下使用預覽工具列或指令面板 (Mac 上為 Cmd+Shift+P 鍵,ChromeOS、Windows 或 Linux 的 Ctrl + Shift + P 鍵)。
如要使用預覽工具列,請按照下列步驟操作:
- 按一下「重新載入」圖示,重新整理頁面。這會強制重新載入。如果是其他類型的重新整理,請按一下重新載入圖示旁邊的箭頭來展開選單。
從選單中選取所需的重新整理選項:「Hot Reload」、「Full Reload」或「Hard Restart」。
設定自動儲存和熱重新載入功能
根據預設,IDX 會在您停止輸入後 1 秒自動儲存您的工作,進而觸發自動熱重新載入作業。如要讓 IDX 以不同時間間隔儲存工作,請變更自動儲存設定。您也可以關閉自動儲存功能。
設定自動儲存功能
- 開啟專案 IDX。
- 按一下「Settings」圖示 。「設定」視窗隨即顯示。
- 搜尋「Files: Auto Save」,並確認該欄位已設為「afterDelay」。
- 搜尋「Files: Auto Save Delay」。畫面上會顯示「自動儲存延遲時間」欄位。
- 輸入新的自動儲存延遲間隔,以毫秒表示。系統會依據新的自動儲存延遲設定,自動儲存工作變更。
關閉自動儲存功能
- 開啟專案 IDX。
- 按一下「Settings」圖示 。「設定」視窗隨即顯示。
- 搜尋「檔案:自動儲存」。
- 點選下拉式選單並選取「關閉」。自動儲存功能現已停用。