Firebase Studio には、ワークスペースから直接アプリをデバッグする方法がいくつか用意されています。ウェブアプリと Flutter アプリの場合、ウェブコンソールと Lighthouse がワークスペースに直接統合されています。Flutter アプリでは、Android とウェブのプレビューを使用して、コーディング中にアプリのスポットチェックとテストを行うことができます。
組み込みのデバッグ コンソールを使用して、ほとんどの一般的な言語で、より高度なブレークポイント ベースのデバッグも利用できます。また、OpenVSX の Debugger 拡張機能を使用して拡張することもできます。フロントエンド ウェブコード（JavaScript など）のブレークポイント ベースのデバッグには、Chrome の DevTools などのブラウザに組み込まれているデベロッパー ツールを引き続き使用できます。
アプリをプレビューする
Firebase Studio には、ウェブアプリ（Chrome）と Flutter アプリ（Android、Chrome）のワークスペース内アプリプレビューが含まれています。Android と Chrome のプレビュー版は、ホットリロードとホット更新をサポートし、エミュレータの完全な機能を提供します。
Firebase Studio プレビューについて詳しくは、アプリのプレビューをご覧ください。
ウェブ プレビューに統合されたウェブ コンソールを使用する
統合されたウェブ コンソールを使用すると、ウェブプレビューから直接アプリの問題を診断できます。下部にあるバーを展開すると、Firebase Studio ウェブプレビュー パネルのウェブコンソールにアクセスできます。
この機能は試験運用中であり、デフォルトでは有効になっていません。有効にするには、次の手順を行います。お試しいただいたら、ぜひフィードバックをお寄せください。
ウェブ コンソールを Firebase Studio ワークスペースに追加します。
- をクリックするか、
Ctrl + ,（Windows/Linux/ChromeOS の場合）またはCmd + ,（macOS の場合）を押して、[設定] を開きます。 - [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 DevTools で利用できるコンソールなど、他のコンソールと同様に機能します。
- アプリの使用中に、JavaScript エラーと
console.logステートメントが表示されます。- エラーや警告の場合は、エラー メッセージの右側にある [このエラーについて] ボタンを選択して Gemini からサポートを受けることもできます。
- 下部のプロンプトバーを使用して、ウェブプレビューのコンテキストで任意の JavaScript を評価できます。
Lighthouse を実行してウェブ プレビューを確認する
Lighthouse は、選択した特定の監査カテゴリに基づいてアプリを監査し、検出結果と推奨事項を含むレポートを返します。Lighthouse レポートは、Firebase Studio のウェブ プレビューから直接実行できます。
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 を使用したデバッグ
Firebase で Gemini を使用すると、Code ワークスペースまたは App Prototyping agent でチャットを使用してコードをデバッグできます。
Gemini はコードを自動生成できますが、エラーが発生することもあります。エラーを検出すると、修正を試みます。エラー メッセージに記載されている問題を解決できない場合は、次の方法をお試しください。
問題を説明する: チャット インターフェースで、発生している問題をできるだけ明確かつ簡潔に説明します。Gemini はエラー メッセージやログなどのコンテキストにアクセスできますが、コンテキスト全体を理解できない場合があります。エラー メッセージとともに動作を説明すると、Gemini がエラーを迅速に修正しやすくなります。
具体的な質問をする: コードについて直接質問Geminiすることを恐れないでください。たとえば、「この関数で null ポインタ例外が発生する原因は何ですか？」や「この競合状態を防ぐにはどうすればよいですか？」などです。
複雑な問題を分割する: 複雑な問題に対処する場合は、より管理しやすい小さな部分に分割します。各部分を個別にデバッグし、問題を段階的に検討できるよう、Gemini に依頼します。
コードフェンスを使用: コードスニペットを共有する際は、コードフェンスを使用することで、コードが適切にフォーマットされるようにします。これにより、Gemini がコードを読みやすく、理解しやすくなります。
反復処理と改良: Gemini は、最初の試行で完璧なソリューションを提供するとは限りません。回答を確認し、詳細を明確にする質問を行い、必要に応じて追加情報を提供します。
プロンプトのループを回避する: Gemini がループに陥ったり、質問に回答できなかったりする場合は、プロンプトを言い換えるか、追加のコンテキストを提供してみてください。質問を言い換えるだけで、Gemini が質問内容を理解できることもあります。
プロンプトを言い換えてもループが解消されない場合は、次の手法をお試しください。
新しいチャットを開始する: Code ワークスペースの Firebase チャットで Gemini を使用している場合は、新しいチャット セッションを開始して Gemini のコンテキストをリセットします。これにより、Gemini が前の会話で抱いた誤解や前提を解消できます。
反例を提供する: Gemini が誤った前提を立てている場合は、正しい動作を理解できるように反例を提供します。