預覽應用程式

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」圖示。「設定」視窗隨即顯示。
搜尋「檔案：自動儲存」。
點選下拉式選單並選取「關閉」。自動儲存功能現已停用。