預覽應用程式

Project IDX 可讓您即時檢視整合應用程式與程式碼編輯器IDX 網頁預覽功能應用程式的網路伺服器和雲端式 Android 的內嵌框架 (iFrame) 模擬器。

啟用並設定預覽環境

如要在工作區中預覽應用程式，請設定預覽畫面環境。

在 .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」和「網頁版」旁的分頁，則取決於啟用的項目不過，您可能需要稍候一段時間，讓環境完成重新建構。嘗試請關閉工作區，再重新開啟 IDX 資訊主頁。

，瞭解如何調查及移除這項存取權。

使用應用程式預覽功能

IDX 在 Chrome 和 Android 模擬器 (在流暢的工作區上) 提供網頁預覽功能可在預覽環境中安裝應用程式因此你可以進行全面測試或是直接在工作區中完成

重新整理網頁版和 Android 版預覽畫面

IDX 掛鉤到基礎架構的熱重載功能 (例如 npm run start 和 flutter hot-reload) 讓自己擁有開發迴圈本節將介紹不同類型的重新載入功能，協助您排解 IDX 上的預設行為不適合您的使用確認是否屬於此情況

自動熱載：當您儲存檔案。有時也稱為「熱模組更換」 (或簡稱 HMR)，不必重新載入網頁 (網頁應用程式) 或未重新載入網頁，即可重新載入應用程式重新啟動或重新安裝應用程式 (適用於模擬器)。這種做法非常適合用來保留應用程式的上線狀態，但有時可能無法如預期般運作而非偏誤。
手動完整重新載入：這個選項等同於網頁重新整理 (適用於網頁) 應用程式) 或應用程式重新啟動 (適用於模擬器)。建議你完整重新載入擷取原始碼的重大變更，例如重構時大型程式碼區塊
手動強制重新啟動：這個選項會執行 IDX 的預覽系統，包括停止及重新啟動在應用程式的網路伺服器中運作

所有重新載入選項都可使用預覽工具列或指令區塊面板 (Mac 上為 Cmd+Shift+P 鍵，ChromeOS、Windows 系統或 Ctrl+Shift+P 鍵)，或是 Linux) 中的 IDX 類別。

如要使用預覽工具列，請按照下列步驟操作：

按一下「重新載入」圖示，即可重新整理頁面。這會強製完整重新載入。若要進行不同類型的重新整理，請按一下重新載入圖示旁邊的箭頭，即可展開選單。
從選單中選取所需的重新整理選項：「熱重新載入」、「完整」請重新載入或強制重新啟動。

設定自動儲存和熱重載

根據預設，在您停止輸入後，IDX 會自動儲存您的工作 1 秒。觸發自動熱重載。如果想透過 IDX 將工作資料儲存於請變更自動儲存設定。你也可以關閉自動儲存功能。

設定自動儲存功能

開啟 Project IDX。
按一下「Settings」(設定) 圖示。系統會隨即顯示「設定」視窗。
搜尋「Files: Auto Save」(檔案：自動儲存)，並確認該欄位已設為 `afterDelay`
搜尋「Files: Auto Save Delay」(檔案：自動儲存延遲)。自動儲存延遲欄位出現。
輸入新的自動儲存延遲時間間隔 (以毫秒為單位)。系統現在會根據新的自動儲存功能，自動儲存您對工作所做的變更及延遲設定。

關閉自動儲存功能

開啟 Project IDX。
按一下「Settings」(設定) 圖示。系統會隨即顯示「設定」視窗。
搜尋「Files: Auto Save」(檔案：自動儲存)。
點選下拉式選單，然後選取「關閉」。現已自動儲存已停用。