Firebase Studio でアプリをデバッグする
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Firebase Studio では、ワークスペースから直接アプリをデバッグする方法がいくつか用意されています。ウェブアプリと Flutter アプリの場合、ウェブ コンソールと Lighthouse がワークスペースに直接統合されています。Flutter アプリでは、Android とウェブ プレビューを使用して、コーディング中にアプリのスポットチェックとテストを行うことができます。
組み込みのデバッグ コンソールを使用して、ほとんどの一般的な言語で、より豊富なブレークポイント ベースのデバッグも利用できます。また、OpenVSX の デバッガ拡張機能を使用して拡張することもできます。フロントエンド ウェブコード（JavaScript など）のブレークポイント ベースのデバッグには、Chrome の DevTools などのブラウザの組み込みデベロッパー ツールを引き続き使用できます。
アプリをプレビューする
Firebase Studio には、ウェブアプリ（Chrome）と Flutter アプリ（Android、Chrome）のワークスペース内アプリ プレビューが含まれています。Android と Chrome のプレビューは、ホットリロードとホット リフレッシュをサポートし、エミュレータの完全な機能を提供します。
Firebase Studio プレビューについて詳しくは、アプリをプレビューするをご覧ください。
ウェブ プレビュー用に統合されたウェブ コンソールを使用する
統合されたウェブ コンソールを使用すると、ウェブ プレビューから直接アプリの問題を診断できます。下部にあるバーを展開すると、Firebase Studio ウェブ プレビュー パネルのウェブコンソールにアクセスできます。
この機能は試験運用版であり、デフォルトでは有効になっていません。有効にするには、次の手順を行います。お試しいただいた後に、ぜひフィードバックをお寄せください。
ウェブ コンソールを Firebase Studio ワークスペースに追加します。
- settings をクリックするか、
Ctrl + ,（Windows/Linux/ChromeOS の場合）または Cmd + ,（MacOS の場合）を押して、[設定] を開きます。
- [Firebase Studio: Web Dev Tools] 設定を見つけて有効にします。
settings.json ファイルを直接編集する場合は、"IDX.webDevTools": true を追加できます。
- ブラウザ ウィンドウを更新して、Firebase Studio ワークスペースを再読み込みします。
Firebase Studio でウェブ プレビューを開く: コマンド パレット（Mac では Cmd+Shift+P、ChromeOS、Windows、Linux では Ctrl+Shift+P）を開き、[Firebase Studio: ウェブ プレビューを表示] を選択します。
デフォルトでは、ウェブ コンソール パネルはウェブ プレビュー パネル内で最小化されています。バーをクリックするか、バーを上にドラッグして開きます。
Firebase Studio ウェブ プレビューのウェブ コンソール パネルは、Chrome DevTools で利用できるコンソールなど、他のコンソールと同様に機能します。
- アプリの使用中に、JavaScript エラーと
console.log ステートメントが表示されます。
- エラーと警告については、エラー メッセージの右側にある [このエラーについて] ボタンを選択して、Gemini からサポートを受けることもできます。
- 下部のプロンプトバーを使用して、ウェブ プレビューのコンテキストで任意の JavaScript を評価できます。
ウェブ プレビューで Lighthouse を実行する
Lighthouse は、選択した特定の監査カテゴリに基づいてアプリを監査し、結果と提案を含むレポートを返します。Firebase Studio のウェブ プレビューから Lighthouse レポートを直接実行できます。
Firebase Studio でウェブ プレビューを開く: コマンド パレット（Mac の場合は Cmd+Shift+P、ChromeOS、Windows、Linux の場合は Ctrl+Shift+P）を開き、[Firebase Studio: ウェブ プレビューを表示] を選択します。
ウェブ プレビュー ツールバーの 
Lighthouse を実行アイコンをクリックします。
Lighthouse パネルで、必要な監査カテゴリを選択します。パフォーマンス、アクセシビリティ、ベスト プラクティスへの準拠、SEO、プログレッシブ ウェブアプリのパフォーマンスを監査するレポートから選択できます。[解析ページ] をクリックして、レポートを生成します。
レポートの生成には数分かかることがあります。
レポートが Lighthouse パネルに表示されたら、各監査カテゴリの検出結果を確認できます。スコアとカテゴリ名をクリックして、監査カテゴリを切り替えることもできます。
デバッグ コンソールを使用する
Firebase Studio には、Code OSS の組み込みデバッグ コンソールが含まれています。このコンソールを使用して、ごく一般的なプログラミング言語の標準デバッガでアプリをデバッグするか、OpenVSX からデバッグ拡張機能を追加します。
デバッグ試験運用版をカスタマイズするには、ワークスペースに .vscode/launch.json ファイルを追加して、カスタムの起動構成を指定することもできます。起動構成ファイルを使用してデバッグをカスタマイズする方法については、Visual Studio Code のデバッグ構成をご覧ください。
Gemini を使用してデバッグする
Gemini in Firebase を使用すると、Code ワークスペースまたは App Prototyping agent のチャットでコードをデバッグできます。
Gemini はコードを自動生成できますが、エラーが発生することもあります。エラーを検出すると、修正を試みます。エラー メッセージに記載されている問題を解決できない場合は、次の方法をお試しください。
問題を説明する: チャット インターフェースで、発生している問題をできるだけ明確かつ簡潔に説明してください。Gemini はエラー メッセージやログなどのコンテキストにアクセスできる場合がありますが、コンテキスト全体を理解できない場合があります。エラー メッセージとともに動作を説明すると、Gemini がエラーを速やかに修正しやすくなります。
具体的な質問をする: コードについて気兼ねなく Gemini に直接質問してください。たとえば、「この関数で null ポインタ例外が発生する原因は何ですか？」や「この競合状態を防ぐにはどうすればよいですか？」などです。
複雑な問題を分割する: 複雑な問題に対処する場合は、より管理しやすい小さな部分に分割します。各部分を個別にデバッグして、問題を段階的に検討できるように、Gemini に支援を依頼します。
コードフェンスを使用: コード スニペットを共有する際は、コードフェンスを使用することで、コードが適切にフォーマットされるようにします。これにより、Gemini ではコードを読みやすく、理解しやすくなります。
イテレーションと改良: Gemini は、最初の試行で必ずしも完璧なソリューションを提供するとは限りません。回答を確認して、不明な点について質問し、必要に応じて追加情報を提供します。
プロンプトのループを回避する: Gemini がループに陥る場合や、質問に回答できない場合は、プロンプトを言い換えるか、追加のコンテキストを提供してみてください。質問を言い換えるだけで、Gemini が質問内容を理解できることもあります。
プロンプトを言い換えてもループが解消されない場合は、次の方法をお試しください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-22 UTC。
[null,null,["最終更新日 2025-08-22 UTC。"],[],[],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."]]
