預覽應用程式

Firebase Studio 提供多種方式,讓您在開發期間預覽及測試應用程式。包括使用 App Prototyping agent、善用內建的網頁預覽工具,以及 Firebase Studio 工作區提供的網頁和 Android 預覽工具。

啟用及設定預覽環境

如果您使用範本或使用 App Prototyping agent 生成應用程式,系統通常會為您設定預覽畫面。如果範本中尚未設定預覽畫面,您可以在專案的 Nix 設定檔中設定。

  1. 在工作區中開啟 .idx/dev.nix

    建立新工作區時,Firebase Studio 會自動產生這個檔案,並根據您選取的範本,納入所有適用的預覽環境。如果檔案不在 Firebase Studio 程式碼存放區中,請建立檔案,然後將 idx.previews 屬性設為 true。然後新增設定屬性,如下列範例所示:

    { pkgs, ... }: {
    
      # NOTE: This is an excerpt of a complete Nix configuration example.
      # For more information about the dev.nix file in Firebase Studio, see
      # https://firebase.google.com/docs/studio/customize-workspace
    
      # 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";
          };
        };
      };
    }
    

    如需 Firebase Studio 中的完整 Nix 屬性清單,請參閱 Nix + Firebase Studio

  2. 重建環境:

    • 從指令面板 (Cmd+Shift+P/Ctrl+Shift+P) 執行「Firebase Studio: Hard restart」指令。
    • 在「環境設定已更新」通知中,按一下「重建環境」

    修改 dev.nix 檔案後重建環境時,工作區會顯示預覽面板,並視您啟用的項目顯示「Android」和/或「網頁」分頁。

使用應用程式預覽

Firebase Studio 會在 Chrome 和 Android 模擬器上提供網頁預覽畫面,並在預覽環境中安裝應用程式。這樣一來,您就能直接在工作區中,從頭到尾完整測試應用程式。

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

Firebase Studio 會掛鉤至基礎架構 (例如 npm run startflutter hot-reload) 的熱重載功能,簡化內部開發迴圈。Firebase Studio 提供下列重新載入類型:

  • 自動熱重載:儲存檔案時,系統會自動執行熱重載。熱重載有時也稱為熱模組更換 (或 HMR),可更新應用程式,不必重新載入網頁 (適用於網頁應用程式),也不必重新啟動或重新安裝應用程式 (適用於模擬器)。這種做法有助於保留應用程式的即時狀態,但可能無法一律如預期運作。

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

  • 手動強制重新啟動:這個選項會完整重新啟動 Firebase Studio 的預覽系統,包括停止及重新啟動應用程式的網路伺服器。

您可以使用預覽工具列或指令區塊面板 (在 Mac 上按 Cmd+Shift+P,在 ChromeOS、Windows 或 Linux 上按 Ctrl+Shift+P),在「Firebase Studio」類別下方找到所有重新載入選項。

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

  1. 按一下「重新載入」圖示即可重新整理頁面。這會強制完整重新載入。 如要使用其他重新整理方式,請點選重新載入圖示旁的箭頭,展開選單。

  2. 從選單中選取所需的重新整理選項:「熱重載」、「完整重新載入」或「硬性重新啟動」

與他人分享網頁預覽畫面

您可以啟用存取權,然後分享預覽畫面的直接連結,讓其他人提供意見:

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

  2. 您可以透過下列任一方式,允許其他人存取工作區:

    • 公開預覽:公開工作區預覽畫面,這樣一來,只要工作區處於啟用狀態,網路上任何人都能存取工作區執行的預覽伺服器,直到您關閉公開存取權為止。

    • 管理工作區存取權。只與要授予存取權的使用者共用工作區。

  3. 選取「複製工作區預覽網址」,即可複製工作區預覽的直接連結,然後傳送給想徵詢意見回饋的對象。你也可以使用顯示的 QR code,在行動裝置上開啟預覽畫面。

設定自動儲存和熱重載

根據預設,Firebase Studio 會在您停止輸入內容一秒後自動儲存工作,並觸發自動熱重載。如要以其他間隔儲存工作,請變更自動儲存設定。Firebase Studio你也可以關閉自動儲存功能。

設定自動儲存

  1. 開啟 Firebase Studio
  2. 按一下「設定」圖示。
  3. 搜尋「Files: Auto Save」,並確認該欄位已設為 `afterDelay`。
  4. 搜尋「檔案:自動儲存延遲」
  5. 輸入新的自動儲存延遲間隔 (以毫秒為單位)。現在系統會根據新的自動儲存延遲設定,自動儲存您對工作所做的變更。

停用自動儲存功能

  1. 開啟 Firebase Studio
  2. 按一下「設定」圖示。
  3. 搜尋「檔案:自動儲存」
  4. 點選下拉式選單,然後選取「關閉」

預覽後端已中斷連線

您可以放心忽略「預覽後端已中斷連線」訊息。

後續步驟