次の方法で共有

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

  • [アーティクル]

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

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

ネイティブ デバッガーをアタッチして Visual Studio でアプリをデバッグすると、 F12 キーを押すと、開発者ツールではなくネイティブ デバッガーがトリガーされる場合があります。 この状況を回避するには、 Ctrl キーを押しながら Shift キーを押しながら I キーを押します。 または、ページを右クリックし、 を選択します Inspect。

要件

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

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

  • Visual Studio 2019 バージョン 16.4 Preview 2 以降をインストールします。

コードをデバッグするには、次の 2 つのセクションに従って、まず Visual Studio でスクリプト デバッガー ツールをインストールして設定します。

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

まず、次のように、C++ を使用したデスクトップ開発で JavaScript 診断 コンポーネントをインストールします。

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

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

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

  4. Visual Studio の [ ワークロード] で、[ デスクトップ開発と C++] 設定を 選択します。

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

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

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

  7. JavaScript 診断設定を選択します。

  8. [修正] をクリックします。

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

WebView2 アプリのスクリプト デバッグを有効にする

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

  1. WebView2 プロジェクトを右クリックし、[ プロパティ] を選択します。

  2. [ 構成プロパティ] で、[ デバッグ] を選択します。

  3. [ デバッガーの種類] で、[ JavaScript (WebView2)] を選択します。

    Visual Studio の

WebView2 アプリをデバッグする

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

  1. ソース コードでブレークポイントを設定するには、行番号の左側にマウス ポインターを合わせ、クリックしてブレークポイントを設定します。 JS/TS デバッグ アダプターは、ソース パス マッピングを実行しません。 WebView2 に関連付けられているのとまったく同じパスを開く必要があります。

    Visual Studio でのブレークポイントの追加

  2. デバッガーを実行するには、プラットフォームのビット サイズを選択し、[ ローカル Windows デバッガー] の横にある緑色の [再生] ボタンをクリックします。 アプリが実行され、デバッガーは、作成された最初の WebView2 プロセスに接続します。

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

  3. デバッグ コンソールで、デバッガーからの出力を見つけます。

    Visual Studio のデバッグ コンソール

トラブルシューティング

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

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

仮想ソース パス マッピングは、Visual Studio Code でデバッガーを使用する場合に 機能します。

関連項目