Project IDX では、ワークスペースから直接アプリをデバッグする方法がいくつか用意されています。ウェブアプリと Flutter アプリの場合、ウェブ コンソールと Lighthouse がワークスペースに直接統合されています。Flutter アプリでは、Android とウェブのプレビューを使用して、コーディング中にアプリをスポットチェックしてテストできます。
組み込みのデバッグ コンソールを使用して、ほとんどの一般的な言語で、より高度なブレークポイント ベースのデバッグも利用できます。また、OpenVSX の Debugger 拡張機能を使用して拡張することもできます。フロントエンドのウェブコードのブレークポイント ベースのデバッグ（JavaScript）の場合は、Chrome の DevTools など、ブラウザに組み込まれているデベロッパー ツールを引き続き使用できます。
アプリをプレビューする
IDX には、ウェブアプリ（Chrome とモバイル Safari）と Flutter アプリ（iOS、Android、Chrome）のWorkspace 内のアプリプレビューが含まれています。Android と Chrome のプレビュー版は、ホットリロードとホット更新をサポートし、エミュレータの完全な機能を提供します。Safari シミュレータと iOS シミュレータでは、さまざまな iOS デバイスでの視覚的なインタラクティブなプレビューを表示し、モバイルアプリとウェブアプリの iOS エクスペリエンスをシミュレートできます。
IDX プレビューの詳細については、アプリをプレビューするをご覧ください。
ウェブ プレビューに統合されたウェブ コンソールを使用する
統合されたウェブ コンソールを使用すると、ウェブプレビューから直接アプリの問題を診断できます。IDX ウェブ プレビュー パネルの下部にあるバーを展開すると、ウェブ コンソールにアクセスできます。
この機能は試験運用中であり、デフォルトでは有効になっていません。有効にするには、次の手順を行います。お試しいただいたら、ぜひフィードバックをお寄せください。
IDX ワークスペースにウェブ コンソールを追加します。
- 歯車アイコンをクリックするか、Ctrl+ ,（Windows/Linux/ChromeOS）または Cmd+ ,（macOS）キーを押して [設定] を開きます。
- [IDX: Web Dev Tools] 設定を見つけて有効にします。
settings.jsonファイルを直接編集する場合は、"IDX.webDevTools": trueを追加できます。 - ブラウザ ウィンドウを更新して、IDX ワークスペースを再読み込みします。
Project IDX でウェブ プレビューを開く: コマンド パレットを開き（Mac の場合は Cmd+Shift+P、ChromeOS、Windows、Linux の場合は Ctrl+Shift+P）、[Project IDX: Show Web Preview] を選択します。
デフォルトでは、ウェブ コンソール パネルはウェブ プレビュー パネル内に最小化されます。バーをクリックするか、バーを上にドラッグして展開します。
IDX ウェブ プレビューのウェブ コンソール パネルは、Chrome DevTools で利用できるコンソールなど、他のコンソールと同様に機能します。
- アプリの使用中に、JavaScript エラーと
console.logステートメントが表示されます。- エラーや警告の場合は、エラー メッセージの右側にある [このエラーについて] ボタンを選択して、IDX の Gemini からサポートを受けることもできます。
- 下部のプロンプトバーを使用して、ウェブプレビューのコンテキストで任意の JavaScript を評価できます。
Lighthouse を実行してウェブ プレビューを確認する
Lighthouse は、選択した特定の監査カテゴリに基づいてアプリを監査し、検出結果と推奨事項を含むレポートを返します。Lighthouse レポートは、Project IDX のウェブプレビューから直接実行できます。
Project IDX でウェブ プレビューを開く: コマンド パレットを開き（Mac の場合は Cmd+Shift+P、ChromeOS、Windows、Linux の場合は Ctrl+Shift+P）、[Project IDX: Show Web Preview] を選択します。
ウェブ プレビュー ツールバーの
[Lighthouse を実行] アイコンをクリックします。
Lighthouse パネルで、必要な監査カテゴリを選択します。パフォーマンス、ユーザー補助、ベスト プラクティスへの準拠、SEO、プログレッシブ ウェブアプリのパフォーマンスを監査するレポートから選択できます。[ページを分析] をクリックしてレポートを生成します。レポートの生成には数分かかることがあります。
Lighthouse パネルにレポートが表示されたら、各監査カテゴリの検出結果を確認できます。また、スコアとカテゴリ名をクリックして監査カテゴリを切り替えることもできます。
デバッグ コンソールを使用する
Project IDX には、Code OSS の組み込みデバッグ コンソールが含まれています。このコンソールを使用して、一般的なプログラミング言語向けの標準デバッガでアプリをデバッグするか、OpenVSX からデバッグ拡張機能を追加します。
デバッグ環境をカスタマイズするには、ワークスペースに .vscode/launch.json ファイルを追加して、カスタムの起動構成を指定することもできます。