在 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 工作區：
- 點按 settings 或按下
Ctrl + , (Windows/Linux/ChromeOS) 或 Cmd + , (MacOS)，開啟「設定」。
- 找到「Web 開發人員工具」Firebase Studio設定並啟用。如果直接編輯
settings.json 檔案，可以新增 "IDX.webDevTools": true。
- 重新整理瀏覽器視窗，重新載入工作區。Firebase Studio
在 Firebase Studio 中開啟網頁預覽：開啟指令區塊面板 (在 Mac 上為 Cmd+Shift+P，在 ChromeOS、Windows 或 Linux 上為 Ctrl+Shift+P)，然後選取「Firebase Studio：顯示網頁預覽」。
網頁預覽面板中的網頁控制台面板預設為最小化狀態。
按一下或向上拖曳即可展開。
Firebase Studio 網頁預覽畫面中的網頁控制台面板運作方式，與其他控制台類似，例如 Chrome 開發人員工具中的控制台：
- 使用應用程式時，JavaScript 錯誤和
console.log 陳述式會顯示在該處。
- 如要取得錯誤和警告的相關協助，請選取錯誤訊息右側的「瞭解這項錯誤」按鈕。Gemini
- 您可以使用底部的提示列，在網頁預覽的環境中評估任意 JavaScript。
針對網頁預覽執行 Lighthouse
Lighthouse 會根據您選取的特定稽核類別稽核應用程式，並傳回包含調查結果和建議的報告。您可以直接在 Firebase Studio 的網頁預覽中執行 Lighthouse 報表。
在 Firebase Studio 中開啟網頁預覽畫面：開啟指令面板 (在 Mac 上為 Cmd+Shift+P，在 ChromeOS、Windows 或 Linux 上為 Ctrl+Shift+P)，然後選取「Firebase Studio: Show Web Preview」(Firebase Studio：顯示網頁預覽畫面)。
按一下網頁預覽工具列中的「執行 Lighthouse」
圖示。
在 Lighthouse 面板中，選取所需的稽核類別。您可以選擇稽核成效、無障礙程度、是否符合最佳做法、SEO 和漸進式網頁應用程式成效的報表。按一下「分析頁面」即可產生報表。
系統可能需要幾分鐘才能產生報表。
報表顯示在 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就能瞭解你想問什麼。
如果重新措辭後仍無法解決迴圈問題，請嘗試下列技巧：
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-07-25 (世界標準時間)。
[null,null,["上次更新時間：2025-07-25 (世界標準時間)。"],[],[],null,["Firebase Studio offers a few different ways to debug your app, directly\nfrom your workspace. For web and Flutter apps, a web console and\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\nare directly integrated into the workspace. Flutter apps offer Android and web\npreviews to spot-check and test your app while you code.\n\nRicher, breakpoint-based debugging is also available for most common languages,\nthrough the built-in Debug Console, and extensible with [Debugger extensions\nfrom OpenVSX](https://open-vsx.org/?category=Debuggers). For\nbreakpoint-based debugging of your frontend web code (like JavaScript), you can\ncontinue using your browser's built-in developer tools, like\n[Chrome's DevTools](https://developer.chrome.com/docs/devtools).\n\nPreview your app\n\nFirebase Studio includes\n[in-workspace app previews](/docs/studio/preview-apps) for web apps (Chrome)\nand Flutter apps (Android, Chrome). The\nAndroid and Chrome previews support hot reload and hot refresh, and offer full\nemulator capabilities.\n\nTo learn more about Firebase Studio previews, see\n[Preview your app](/docs/studio/preview-apps).\n\nUse the integrated web console for web previews\n\nThe integrated web console helps you diagnose issues in your app directly\nfrom the web preview. You can access the web console in the\nFirebase Studio web preview panel by expanding the bar at the bottom.\n\nNote that this feature is experimental and isn't enabled by default. To\nturn it on, follow these steps, and [share your\nfeedback](/support/troubleshooter/studio) after\nyou've tried it out:\n\n1. Add the web console to your Firebase Studio workspace:\n\n 1. Open **Settings** by clicking settings or pressing `Ctrl + ,` (on Windows/Linux/ChromeOS) or `Cmd + ,` (on MacOS).\n 2. Find the **Firebase Studio: Web Dev Tools** setting and enable it. If you're editing your `settings.json` file directly, you can add `\"IDX.webDevTools\": true`.\n 3. Refresh your browser window to reload your Firebase Studio workspace.\n2. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or Linux)\n and select **Firebase Studio: Show Web Preview**.\n\n3. The web console panel is minimized within the web preview panel by default.\n Click the bar or drag it up to expand it.\n\nThe web console panel in the Firebase Studio web preview works\nsimilarly to other consoles, such as the one available in\n[Chrome DevTools](https://developer.chrome.com/docs/devtools):\n\n- JavaScript errors and `console.log` statements will appear there as you use your app.\n - For errors and warnings, you also have the option to get assistance from Gemini by selecting the **Understand this error** button at the right of the error message.\n- You can evaluate arbitrary JavaScript in the context of your web preview by using the prompt bar at the bottom.\n\nRun Lighthouse for web previews\n\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\naudits your app based on the specific audit categories you select, and returns\na report with findings and suggestions. You can run Lighthouse reports directly\nfrom the web preview in Firebase Studio.\n\n1. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or\n Linux) select **Firebase Studio: Show Web Preview**.\n\n2. Click the\n **Run Lighthouse** icon from the web preview toolbar.\n\n3. In\n the Lighthouse panel, select the audit categories you want. You can\n choose from reports auditing [performance](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring), [accessibility](https://developer.chrome.com/docs/lighthouse/accessibility/scoring),\n [conformance with best practices](https://developer.chrome.com/docs/lighthouse/best-practices/doctype), [SEO](https://developer.chrome.com/docs/lighthouse/seo/meta-description), and [Progressive Web\n App performance](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa). Click **Analyze page** to generate the reports.\n\n The reports might take a few minutes to generate.\n4. After the reports appear in the Lighthouse panel, you can review the\n findings for each audit category, or switch between audit categories by\n clicking the score and category name.\n\nUse the Debug Console\n\nFirebase Studio includes the built-in Debug Console from Code OSS. Use this\nconsole to debug your app with out-of-the-box debuggers for most common\nprogramming languages, or add a debugging extension from\n[OpenVSX](https://open-vsx.org/?category=Debuggers).\n\nTo customize your debugging experience, you can also add a `.vscode/launch.json`\nfile to your workspace and specify custom launch configurations. Learn more\nabout using launch configuration files to customize debugging at\n[Visual Studio Code debug\nconfiguration](https://github.com/microsoft/vscode-docs/blob/main/docs/debugtest/debugging-configuration.md).\n\nDebug with Gemini\n\nYou can use Gemini in Firebase to help you debug your code with\nchat in your **Code** workspace\nor the App Prototyping agent.\n\nWhile Gemini can write code for you, it might sometimes also\nproduce errors. When it detects an error, it will attempt\nto fix it. If you find that it isn't able to resolve the issue given\nthe error message, you can try some of the following techniques:\n\n- **Describe the issue:** In the chat interface, describe the\n problem you're encountering as clearly and concisely as possible.\n While Gemini might have access to context like error messages\n and logs, it might not understand the full context. Describing the behavior\n along with the error message can help Gemini fix errors\n faster.\n\n- **Ask specific questions:** Don't be afraid to ask Gemini\n direct questions about your code. For example, \"What could be causing a\n null pointer exception in this function?\" or \"How can I prevent\n this race condition?\"\n\n- **Break down complex problems:** If you're dealing with a complex\n issue, break it down into smaller, more manageable parts. Ask\n Gemini to help you debug each part separately and think\n through problems step-by-step.\n\n- **Use code fences:** When sharing code snippets, use code fences\n to ensure that the code is properly formatted. This makes it easier\n for Gemini to read and understand your code.\n\n- **Iterate and refine:** Gemini may not always provide the perfect\n solution on the first try. Review the responses, ask clarifying\n questions, and provide additional information as needed.\n\n- **Avoid prompting loops:** If Gemini gets stuck in a loop or is\n unable to answer your question, try rephrasing your prompt or\n providing additional context. Sometimes, just rewording your\n question can help Gemini understand what you're asking.\n\n If rephrasing your prompt doesn't resolve the loop, try\n the following techniques:\n - **Start a new chat:** If you're using Gemini in Firebase\n chat in your Code\n workspace, start a new chat session to reset\n Gemini's context. This can help break free from any\n misconceptions or assumptions that Gemini may have made\n in the previous conversation.\n\n - **Provide counter-examples:** If Gemini is making incorrect\n assumptions, provide counter-examples to help it understand\n the correct behavior."]]
