在 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)，開啟「Settings」。
    2. 找到「Firebase Studio：網頁開發人員工具」設定並啟用。如果您直接編輯 settings.json 檔案，可以新增 "IDX.webDevTools": true。
    3. 重新整理瀏覽器視窗，重新載入 Firebase Studio 工作區。

  2. 在 Firebase Studio 中開啟網頁預覽：開啟指令面板 (Mac 為 Cmd+Shift+P，ChromeOS、Windows 或 Linux 為 Ctrl+Shift+P) ，然後選取「Firebase Studio: Show Web Preview」。

  3. 根據預設，網頁控制台面板會在網頁預覽面板中縮到最小。按一下或向上拖曳該列，即可展開。

Firebase Studio 網頁預覽中的網頁控制台面板，運作方式與其他控制台類似，例如 Chrome 開發人員工具中的控制台：

  • 使用應用程式時，JavaScript 錯誤和 console.log 陳述式會顯示在該處。
    • 如果發生錯誤和警告，您也可以選取錯誤訊息右側的「Understand this error」(瞭解這項錯誤) 按鈕，向 Gemini 尋求協助。
  • 您可以使用底部的提示詞列，在網頁預覽畫面中評估任意 JavaScript。

執行 Lighthouse 網頁預覽

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

  1. 在 Firebase Studio 中開啟網頁預覽：開啟指令面板 (Mac 為 Cmd+Shift+P，ChromeOS、Windows 或 Linux 為 Ctrl+Shift+P)，然後選取「Firebase Studio: Show Web Preview」。

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

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

    報表可能需要幾分鐘才能生成。

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

使用偵錯控制台

Firebase Studio 包含 Code OSS 內建的偵錯控制台。您可以使用這個控制台，透過適用於大多數常見程式設計語言的現成偵錯工具，對應用程式進行偵錯，或從 OpenVSX 新增偵錯擴充功能。

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

使用 Gemini 偵錯

您可以在 Code 工作區或 App Prototyping agent 中，使用 Gemini 透過對話偵錯程式碼。

雖然 Gemini 可以為您編寫程式碼，但有時也可能出錯。偵測到錯誤時，系統會嘗試修正。如果發現無法根據錯誤訊息解決問題，可以嘗試下列幾種技巧：

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

  • 提出具體問題：請放心直接詢問Gemini 程式碼相關問題。例如：「這個函式中可能導致空值指標例外狀況的原因為何？」或「如何避免這個競爭狀況？」

  • 拆解複雜問題：如果問題很複雜，請拆解成較小、較容易處理的部分，請 Gemini 協助您分別對各部分進行偵錯，並逐步思考問題。

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

  • 反覆測試及修正：Gemini 不一定能在第一次嘗試時提供完美的解決方案。查看回覆、提出釐清問題，並視需要提供其他資訊。

  • 避免提示迴圈：如果 Gemini 卡在迴圈中或無法回答問題，請嘗試重新撰寫提示或提供更多背景資訊。有時只要換個方式提問，Gemini 就能理解你的問題。

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

    • 發起新對話：如果是在 Code 工作區使用 Gemini 對話，請發起新的對話工作階段，重設 Gemini 的上下文。這有助於擺脫 Gemini 在先前對話中可能產生的任何誤解或假設。

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