在 Firebase Studio 中偵錯應用程式

Firebase Studio 提供幾種不同的方式，可直接從工作區偵錯應用程式。針對網頁和 Flutter 應用程式，網頁控制台和 Lighthouse 會直接整合至工作區。Flutter 應用程式提供 Android 和網頁預覽畫面，方便您在編寫程式碼時進行檢查和測試。

您也可以透過內建的偵錯主控台，為大多數常見語言提供更豐富的偵錯功能，並透過 OpenVSX 的偵錯工具擴充功能擴充功能擴充。如要根據中斷點偵錯前端網頁程式碼 (例如 JavaScript)，您可以繼續使用瀏覽器內建的開發人員工具，例如 Chrome 的開發人員工具。

預覽應用程式

Firebase Studio 包含網頁應用程式 (Chrome) 和 Flutter 應用程式 (Android、Chrome) 的工作區內應用程式預覽畫面。Android 和 Chrome 預覽版支援熱重載和熱重新整理功能，並提供完整的模擬器功能。

如要進一步瞭解 Firebase Studio 預覽功能，請參閱「預覽應用程式」。

使用整合式網路主控台查看網路預覽畫面

Firebase Studio 網頁預覽畫面中的縮小版主控台列

整合式網頁控制台可協助您直接透過網頁預覽畫面診斷應用程式問題。您可以展開底部的列，在 Firebase Studio 網路預覽面板中存取網路控制台。

請注意，這項功能仍在實驗階段，預設為停用。如要開啟這項功能，請按照下列步驟操作，並在試用後提供意見：

  1. 將網路主控台新增至 Firebase Studio 工作區：

    1. 按一下 或按下 Ctrl + , (在 Windows/Linux/ChromeOS 上) 或 Cmd + , (在 MacOS 上)，即可開啟「設定」。
    2. 找出「Firebase Studio：Web 開發人員工具」設定並啟用。如果您直接編輯 settings.json 檔案，可以新增 "IDX.webDevTools": true。
    3. 重新整理瀏覽器視窗，重新載入 Firebase Studio 工作區。

  2. 在 Firebase Studio 中開啟網頁預覽畫面：開啟指令面板 (Mac 上的 Cmd+Shift+P 或 ChromeOS、Windows 或 Linux 上的 Ctrl+Shift+P)，然後選取「Firebase Studio：顯示網頁預覽畫面」。

  3. 根據預設，網頁資訊主頁面板會在網頁預覽面板中縮小顯示。按一下或向上拖曳列即可展開。

Firebase Studio 網路預覽畫面中的網路主控台面板與其他主控台 (例如 Chrome 開發人員工具) 的運作方式類似：

  • 使用應用程式時，系統會在該畫面上顯示 JavaScript 錯誤和 console.log 陳述式。
    • 針對錯誤和警告，您也可以選擇透過 Gemini 取得協助，方法是選取錯誤訊息右側的「瞭解這個錯誤」按鈕。
  • 您可以使用底部的提示列，在網頁預覽畫面中評估任意 JavaScript。

執行 Lighthouse 以取得網頁預覽

Lighthouse 會根據您選取的特定稽核類別稽核應用程式，並傳回包含發現事項和建議的報告。您可以直接在 Firebase Studio 的網頁預覽畫面中執行 Lighthouse 報表。

  1. 在 Firebase Studio 中開啟網頁預覽畫面：開啟指令面板 (Mac 上的 Cmd+Shift+P 或 ChromeOS、Windows 或 Linux 上的 Ctrl+Shift+P)，然後選取「Firebase Studio：顯示網頁預覽畫面」。

  2. 按一下網頁預覽工具列中的 速度檢查圖示的圖片「執行 Lighthouse」圖示。

  3. Firebase Studio 中的 Lighthouse 面板圖片 在 Lighthouse 面板中，選取所需稽核類別。您可以選擇檢查成效、無障礙性、符合最佳做法、SEO和漸進式網頁應用程式成效的報表。按一下「分析網頁」即可產生報表。

    系統可能需要幾分鐘的時間才能產生報表。

  4. 報表顯示在 Lighthouse 面板後，您可以查看每個稽核類別的結果，或是點選分數和類別名稱來切換稽核類別。

使用偵錯主控台

Firebase Studio 包含 Code OSS 內建的偵錯主控台。您可以使用這個控制台，針對最常見的程式設計語言，使用現成的偵錯工具偵錯應用程式，或是透過 OpenVSX 新增偵錯擴充功能。

如要自訂偵錯體驗，您也可以在工作區中新增 .vscode/launch.json 檔案，並指定自訂啟動設定。如要進一步瞭解如何使用啟動設定檔自訂偵錯作業，請參閱「Visual Studio Code 偵錯設定」。

使用 Gemini 進行偵錯

您可以在 Firebase 中使用 Gemini，透過 Code 工作區或 App Prototyping agent 中的即時通訊功能，協助您偵錯程式碼。

雖然 Gemini 可以為您編寫程式碼，但有時也可能會產生錯誤。偵測到錯誤時，會嘗試修正錯誤。如果發現無法透過錯誤訊息解決問題，可以嘗試下列幾種方法：

  • 說明問題：在即時通訊介面中，盡可能清楚簡潔地說明遇到的問題。雖然 Gemini 可能可以存取錯誤訊息和記錄等內容，但可能無法瞭解完整的內容。描述行為並附上錯誤訊息，有助於 Gemini 更快修正錯誤。

  • 提出具體問題：請不要害怕直接詢問 Gemini 程式碼相關問題。例如：「什麼可能導致這個函式中的空值指標例外狀況？」或「如何避免這種競爭狀態？」

  • 將複雜問題細分：如果您遇到複雜的問題，請將問題細分為較小且易於管理的部分。請 Gemini 協助您分別偵錯各個部分，並逐步思考問題。

  • 使用程式碼區塊：分享程式碼片段時，請使用程式碼區塊，確保程式碼格式正確無誤。這樣一來，Gemini 就能更輕鬆地讀取及瞭解您的程式碼。

  • 迭代及精進： Gemini 不一定會在第一次嘗試時提供完美的解決方案。查看回覆內容、提出釐清問題，並視需要提供其他資訊。

  • 避免重複提示：如果 Gemini 卡在迴圈中，或無法回答您的問題，請嘗試重新提示，或提供其他背景資訊。有時只要重新表達問題，就能讓 Gemini 瞭解你想詢問的問題。

    如果重新表達提示訊息仍無法解決迴圈問題，請嘗試下列技巧：

    • 開始新的聊天：如果您在 Code 工作區的 Firebase 聊天中使用 Gemini，請啟動新的聊天工作階段，藉此重設 Gemini 的內容。這有助於擺脫 Gemini 在先前對話中可能產生的任何誤解或假設。

    • 提供反例：如果 Gemini 做出錯誤的假設，請提供反例，協助其瞭解正確的行為。