プロジェクト IDX でアプリをデバッグする

Project IDX では、複数の方法でワークスペースから直接アプリをデバッグできます。ウェブアプリと Flutter アプリでは、ワークスペースの Chrome ウェブ プレビューで Lighthouse と Chrome DevTools を利用できます。Flutter アプリには、コーディング中にアプリのスポットチェックとテストを行うための、iOS、Android、ウェブでのプレビューが用意されています。組み込みのデバッグ コンソールは、一般的な言語の自動デバッグと、ワークスペース内の launch.json ファイルで定義できるカスタム デバッグをサポートしています。

アプリをプレビューする

IDX には、ウェブアプリ（Chrome とモバイル Safari）と Flutter アプリ（iOS、Android、Chrome）の Workspace 内アプリ プレビューが含まれています。Android と Chrome のプレビューは、ホットリロードとホットリフレッシュをサポートし、エミュレータの全機能を提供します。Safari と iOS のシミュレータでは、さまざまな iOS デバイスでビジュアル プレビューとインタラクティブ プレビューが提供され、モバイルアプリとウェブアプリでの iOS エクスペリエンスをシミュレートできます。

IDX プレビューについて詳しくは、アプリをプレビューするをご覧ください。

ウェブ プレビューに Chrome DevTools を使用する（試験運用版）

Chrome DevTools では、ウェブ プレビューから直接、アプリの問題を診断できます。IDX ウェブ プレビュー パネルで Chrome DevTools には、Chrome ブラウザから DevTools を開くのと同じ方法でアクセスできます。IDX ウェブ プレビューに表示された最小化された DevTools パネル

この機能は試験運用版であり、最適なユーザー エクスペリエンスの実現に向けて取り組んでいます。フィードバックを送信して、サービスの改善にご協力ください。

  1. Chrome DevTools を IDX ワークスペースに追加します。

    1. 歯車アイコンをクリックするか、Ctrl+ , キー（Windows、Linux、ChromeOS の場合）または Cmd+ , キー（MacOS の場合）を押して、[Settings] ウィンドウを開きます。
    2. [IDX: Web Dev Tools] の設定を見つけて、[Chrome DevTools のウェブ プレビューを有効にする] を選択します（ブラウザの再読み込みが必要です）。settings.json ファイルを使用する場合は、"IDX.webDevTools": true を設定することもできます。
    3. ブラウザ・ウィンドウを更新し、IDX ワークスペースを再読み込みします。

  2. プロジェクト IDX でウェブ プレビューを開きます。コマンド パレット（Mac では Cmd+Shift+P、ChromeOS、Windows、Linux では Ctrl+Shift+P）を開き、[プロジェクト IDX: ウェブでプレビューを表示] を選択します。

  3. [ウェブ プレビュー] パネル内で DevTools パネルが最小化されています。DevTools バーをクリックしてパネルを展開し、ウェブ プレビュー パネル内で DevTools を使用します。

IDX ウェブ プレビューの DevTools パネルは、Chrome ブラウザでアプリをデバッグするのと同じ方法で使用します。

ウェブ プレビュー用に Lighthouse を実行する

Lighthouse は、選択した特定の監査カテゴリに基づいてアプリを監査し、調査結果と提案を含むレポートを返します。Lighthouse レポートは、プロジェクト IDX のウェブ プレビューから直接実行できます。

  1. プロジェクト IDX でウェブ プレビューを開きます。コマンド パレット（Mac では Cmd+Shift+P、ChromeOS、Windows、Linux では Ctrl+Shift+P）を開き、[プロジェクト IDX: ウェブでプレビューを表示] を選択します。

  2. ウェブ プレビュー ツールバーのパフォーマンス チェック アイコンをクリックします。速度確認アイコンの画像

  3. IDX の灯台パネルの画像 [Lighthouse] パネルで、必要な監査カテゴリを選択します。パフォーマンス、ユーザー補助、ベスト プラクティスへの準拠、SEO、プログレッシブ ウェブアプリのパフォーマンスの監査レポートから選択できます。[Analyze page] をクリックしてレポートを生成します。

    レポートの生成には数分かかることがあります。

  4. Lighthouse パネルにレポートが表示されたら、監査カテゴリごとに検出結果を確認できます。また、スコアとカテゴリ名をクリックして監査カテゴリを切り替えることもできます。

デバッグ コンソールを使用する

Project IDX には、Code OSS のデバッグ コンソールが組み込まれています。このコンソールでは、一般的なプログラミング言語ですぐに使用できるデバッガでアプリをデバッグできます。また、VSCode Marketplace からデバッグ拡張機能を追加することもできます。

カスタム デバッグを作成する場合は、ワークスペースに launch.json ファイルを追加します。