預覽應用程式

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 start 和 flutter 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你也可以關閉自動儲存功能。

預覽後端已中斷連線

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

後續步驟

• 透過 Firebase 發布。
• 監控應用程式。