預覽應用程式

Firebase Studio 提供預覽工具，可在程式碼編輯器旁邊顯示應用程式的即時檢視畫面。

啟用及設定預覽環境

如果您使用範本，系統通常會為您預先設定預覽畫面。如果範本中尚未設定預覽畫面，您可以在專案的 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：硬重啟指令。
   • 在「環境設定已更新」通知中，按一下「重建環境」。

   修改 dev.nix 檔案後，重新建構環境時，預覽面板會顯示在工作區中，並顯示 Android 和 Web 分頁，或兩者皆顯示，這取決於您啟用的功能。

使用應用程式預覽功能

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. 按一下「Reload」圖示，即可重新整理頁面。這會強制重新載入。如要使用其他類型的重新整理功能，請按一下重新整理圖示旁的箭頭，展開選單。

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

與他人分享網頁預覽畫面

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

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

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

   • 將預覽內容公開：讓工作區預覽內容公開供大眾存取。這樣一來，在工作區域啟用時，網路上的任何人都能存取在工作區域上執行的預覽伺服器，直到您關閉公開存取權為止。

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

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

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

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

後續步驟

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