預覽應用程式

您可以透過 Project IDX 在程式碼編輯器旁邊顯示應用程式的即時檢視畫面，預覽您的工作。IDX 網頁預覽會算繪應用程式網路伺服器和雲端 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. 重新建構環境：

    • 透過指令面板 (Cmd + Shift + P/Ctrl + Shift + P) 執行 Project IDX：硬重啟指令。
    • 在「環境設定已更新」通知中，按一下「重建環境」。

    修改 dev.nix 檔案後，重新建構環境時，工作區會顯示預覽面板，顯示 Android 和 Web 分頁，具體取決於您啟用的項目。不過，您可能需要等待一段時間，讓環境重新建構。請嘗試關閉工作區，然後從 IDX 資訊主頁重新開啟。

使用應用程式預覽功能

IDX 會在 Chrome 和 Android 模擬器 (在 Flutter 工作區) 上提供網頁預覽畫面，在預覽環境中安裝您的應用程式，讓您可以直接在工作區中進行完整的端對端測試。

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

IDX 會鉤住基礎架構 (例如 npm run start 和 flutter hot-reload) 的熱重新載入功能，為您提供緊密的內部開發循環。本節將介紹各種重新載入類型，協助您排除 IDX 的預設行為無法滿足使用情境的問題。

  • 自動熱載：儲存檔案時，系統會自動執行熱載。有時稱為「熱模組取代」 (或 HMR)，熱重新載入可更新應用程式，而無需重新載入網頁 (針對網頁應用程式)，也不需要重新啟動或重新安裝應用程式 (針對模擬器)。這個做法非常適合保留應用程式的即時狀態，但有時可能無法正常運作。

  • 手動重新載入：這個選項相當於網頁重新整理 (針對網頁應用程式) 或應用程式重新啟動 (針對模擬器)。建議您使用完整重新載入功能，擷取原始碼的重大變更，例如重構大量程式碼時。

  • 手動硬重啟：這個選項會完全重新啟動 IDX 的預覽系統，包括停止及重新啟動應用程式的網路伺服器。

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

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

  1. 按一下「重新整理」圖示，即可重新整理頁面。這會強制重新載入。如要進行其他類型的重新整理，請按一下重新整理圖示旁的箭頭，展開選單。

  2. 從選單中選取所需的重新整理選項：熱重新整理、完整重新整理或強制重新啟動。

    預覽工具列位於預覽面板頂端

與他人分享網頁預覽畫面

您可以啟用存取權，然後分享預覽版的直接連結，與其他人分享應用程式的網頁預覽畫面，以便取得意見回饋：

  1. 在網頁預覽工具列中，按一下網址列右側的 連結圖示圖片「分享預覽連結」圖示，開啟分享選單。

    預覽分享選單

  2. 使用下列任一選項，允許其他人存取您的工作區：

    • 選項 A：選取「將預覽內容公開」，讓工作區預覽版可供大眾存取。這樣一來，網際網路上的任何人都能在工作區處於啟用狀態時存取工作區的執行中預覽伺服器，直到您關閉公開存取權為止。

    • 選項 B：選取「管理工作區存取權」，即可只與您要授予存取權的使用者共用工作區。

  3. 選取「複製預覽網址」，即可複製工作空間預覽畫面的直接連結，並傳送給想取得意見回饋的對象。

設定自動儲存和熱重新載入

根據預設，IDX 會在您停止輸入後一秒自動儲存您的工作，並觸發自動熱載入作業。如果您希望 IDX 以不同的間隔儲存您的工作，請變更自動儲存設定。你也可以關閉自動儲存功能。

設定自動儲存功能

  1. 開啟 Project IDX。
  2. 按一下「設定」圖示。畫面上會顯示「設定」視窗。
  3. 搜尋「Files: Auto Save」，並確認該欄位已設為 `afterDelay`。
  4. 搜尋「Files: Auto Save Delay」。畫面上會顯示「Auto Save Delay」欄位。
  5. 輸入新的自動儲存延遲間隔，以毫秒為單位。 系統現在會根據新的自動儲存延遲設定，自動儲存工作變更。

停用自動儲存功能

  1. 開啟 Project IDX。
  2. 按一下「設定」圖示。畫面上會顯示「設定」視窗。
  3. 搜尋「檔案：自動儲存」。
  4. 按一下下拉式選單，然後選取「關閉」。現在已停用自動儲存功能。