次の方法で共有

Visual Studio を使用して WebView2 アプリをデバッグする

  • [アーティクル]

Microsoft Visual Studio には、WebView2 アプリの Web およびネイティブ コード用のさまざまなデバッグ ツールが用意されており、Win32 アプリまたは Office アドインで Web およびネイティブ コードをデバッグできます。この記事では、WebView2 コントロールのデバッグについて説明します。 Visual Studio でデバッグするその他の方法も使用できます。

大まかな手順の概要

WebView2 コントロールで JavaScript コードをデバッグするには:

  1. Visual Studio の C++ ワークロードを使用したデスクトップ開発、または別のプラットフォームのワークロードに JavaScript 診断 コンポーネントをインストールします。

  2. JavaScript コードの行にブレークポイントを設定します。

  3. プロジェクトの [プロパティ>Debugging ] ページで、[ デバッガーの種類] を [JavaScript (WebView2)] ( 自動 または ネイティブではなく) に設定します。

  4. 通常どおりデバッガーを起動します。 たとえば、メニュー バーで [デバッグ] > [デバッグの開始 ] (F5) を選択します。

  5. 実行中の WebView2 アプリで、JavaScript コードを実行する Web ページと対話します。 デバッガーは、ブレークポイントを持つ JavaScript コードの行で一時停止します。

  6. Visual Studio でデバッガー ウィンドウを使用します。

以下の手順は、メイン Win32/C++ サンプル (WebView2APISample) を使用して詳しく説明します。

要件

  • 以下の具体的な例の手順に従う場合は、WebView2Samples リポジトリを複製します (メイン、Win32/C++ サンプル、WebView2APISample を使用)。 次の手順は、これを行う方法を示しています。

  • Visual Studio 2022 をインストールします。 Visual Studio 2022 を使用して、WebView2 サンプル アプリと独自の WebView2 アプリを操作できます。 (Visual Studio 2019 も動作します)。次の手順は、これを行う方法を示しています。

  • Visual Studio でスクリプト デバッガー ツールをインストールして設定します。 つまり、JavaScript 診断 コンポーネントを含む、Visual Studio の C++ ワークロード (または異なる言語の同等のワークロード) を使用してデスクトップ開発をインストールします。 次の手順は、これを行う方法を示しています。

  • WebView2APISample アプリがビルドして実行されるように、メイン Win32/C++ サンプルをビルドして実行します (以下の特定の例の手順に従う場合)。 次の手順は、これを行う方法を示しています。

  • スクリプトをデバッグするには、Visual Studio 内からアプリを起動する必要があります。

  • 実行中の WebView2 プロセスにデバッガーをアタッチすることはできません。

JavaScript 診断 コンポーネントをインストールする

Visual Studio インストーラーを使用して、次のように、JavaScript 診断 コンポーネントを含む Visual Studio の C++ ワークロードを使用してデスクトップ開発をインストールします。 または、C++ 以外の言語ワークロードを使用している場合は、次の手順のように、そのワークロードの JavaScript 診断 コンポーネントを選択します。

  1. まだ完了していない場合は、「WebView2 用の開発環境を設定する」の 「WebView2Samples リポジトリを複製 する」で説明されているように 、WebView2Samples リポジトリを複製します。

  2. まだ完了していない場合は、「WebView2 用の開発環境を設定する」の「Visual Studio のインストール」の説明に従って、Visual Studio 2022 をインストールします。

  3. Visual Studio 2022 で、 次のようにデスクトップ開発と C++ ワークロードをインストールします。

  4. Windows エクスプローラー バーに「Visual Studio Installer」と入力します。

  5. [Visual Studio インストーラー] を選択して開きます。

  6. Visual Studio インストーラーで、インストールされているバージョンで [その他] ボタンをクリックし、[変更] を選択します。

  7. Visual Studio の [ ワークロード] で、 C++ を使用したデスクトップ開発 ワークロードを選択して、チェックマークが表示されるようにします。

    Visual Studio の [ワークロードの変更] 画面

  8. 上部にある [ 個々のコンポーネント] を選択します。

  9. 検索ボックスに「 JavaScript diagnostics」と入力します。

  10. [JavaScript 診断] チェック ボックスをオンにします。

    Visual Studio: [個々のコンポーネント] タブの値を変更する

  11. [ 変更 ] ボタンをクリックします。

以下の次のセクションに進みます。

JavaScript (WebView2) デバッガーを選択する

次に、次のように WebView2 アプリのスクリプト デバッグを有効にします。

  1. まだ実行していない場合は、 Win32 サンプル アプリ の手順を実行して、WebView2APISample アプリがビルドおよび実行されるようにします。 Visual Studio で WebView2Samples ソリューションを開き、サンプル アプリを実行しないでください。 または、Visual Studio で独自の WebView2 アプリ プロジェクトを開きます。

  2. Visual Studio のソリューション エクスプローラーで、WebView2APISample プロジェクト (または独自のプロジェクト) を右クリックし、[プロパティ] を選択します。

    [ プロパティ ページ] ダイアログが開きます。

  3. 左側の [ 構成プロパティ] を展開し、[ デバッグ] を選択します。

  4. [デバッガーの種類] の右側にある [JavaScript (WebView2)] を選択し、[OK] ボタンをクリックします。

    Visual Studio の

WebView2 アプリをデバッグする

上記のセットアップを行った後、次のように WebView2 アプリをデバッグします。

  1. ソース コードでブレークポイントを設定するには、行番号の左側にマウス ポインターを合わせ、クリックしてブレークポイントを設定します。 たとえば、WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.jsを開き、onAddClick関数の本文で 2 行目のconsole.log("onAddClick+");にブレークポイントを設定します。

    Visual Studio でのローカル Windows デバッガーの実行

    ブレークポイントを設定するときは、JS/TS デバッグ アダプターがソース パス マッピングを実行しないため、WebView2 コントロールに関連付けられているパスとまったく同じパスにあるファイルを開く必要があります。

    コードのこのセクションが実行されると、ブレークポイントがトリガーされます。 このブレークポイントは、後の手順でサンプル アプリの [ 新しい項目の追加 ] ボタンをクリックするとトリガーされます。

  2. プラットフォームのビット サイズ ( x64 など) を選択します。

  3. デバッガーを実行するには、次のいずれかの操作を行います。

    • メニュー バーで、 デバッグ>デバッグの開始 (F5) を選択します。
    • ソリューション エクスプローラーで、プロジェクト >Debug>Start New Instance または Step Into New Instance を右クリックします。
    • ローカル Windows デバッガーの左側にある緑色の [再生] ボタンをクリックします。

    WebView2APISample アプリ (または独自のアプリ) が実行されて開き、デバッガーは作成された最初の WebView2 プロセスに接続します。 プロパティ>プロジェクトのデバッグで、ローカル Windows デバッガーが JavaScript (WebView2) に設定されました。

  4. Visual Studio で、右下の [ 出力 ] タブをクリックします。

    タブには、JS デバッガーに関する "詳細ログの書き込み先: C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt" というメッセージのみが含まれています。

  5. WebView2APISample アプリ ウィンドウで、[ シナリオ>Script デバッグ>JavaScript ローカル ファイル] を選択します。

    ファイル WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html がレンダリングされます。

    レンダリングされた HTML ファイル

  6. Visual Studio で、[ 出力 ] ウィンドウを調べます。 次の出力が追加されました。

    This is the very first line of code that executes.
Second
Third
inside
onAddClick+
onAddClick-
onAddClick+
onAddClick-
End

  7. アプリの Web ページで、[ 新しい項目の追加 ] ポップアップ ボタンをクリックします。

    onAddClick関数のブレークポイントがヒットし、アプリがデバッガーで一時停止します。

  8. Visual Studio ウィンドウに切り替えて、デバッガー ウィンドウを確認します。

  9. [ 出力 ] タブをクリックして、アプリの出力を表示します。

    デバッガーからの出力を示す Visual Studio 2022 の [出力] タブ

    アプリの出力には、ファイル WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.htmlの行console.log("This is the very first line of code that executes.");が原因で、"これが実行されるコードの最初の行です" と表示されます。

トラブルシューティング

F12 以外のアプローチを使用して DevTools を開く

ネイティブ デバッガーがアタッチされた状態で Visual Studio でアプリをデバッグすると、実行中のアプリを表示するときに 、F12 キーを押すと、開発者ツールを起動する代わりにネイティブ デバッガーが起動することがあります。

DevTools を開くには、 Ctrl + Shift + I キーを押します。 または、実行中のアプリでページを右クリックし、[ Inspect] を選択します。

Visual Studio 2019 では、仮想ソース パス マッピングはサポートされていません

WebView2 SetVirtualHostNameToFolderMapping メソッドを使用する場合、Visual Studio 2019 のデバッガーは仮想ソース パスのマッピングを理解していないため、ブレークポイントが正しく機能しません。

ブレークポイントを設定するときは、JS/TS デバッグ アダプターがソース パス マッピングを実行しないため、WebView2 コントロールに関連付けられているパスとまったく同じパスにあるファイルを開く必要があります。

仮想ソース パス マッピングは、Visual Studio Code のデバッガーでサポートされています。

関連項目