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

Microsoft Visual Studio Code を使用して、WebView2 コントロールで実行されるスクリプトをデバッグします。 Visual Studio Code には、ブラウザー デバッグ用のデバッガーが組み込まれています。 VS Code でのブラウザー デバッグに関するページを参照してください。

launch.json ファイルを作成する

コードをデバッグするには、プロジェクトに launch.json ファイルが必要です。 launch.json ファイルは、Visual Studio Code デバッガーを構成およびカスタマイズするためのデバッガー構成ファイルです。 デバッガーを構成するために必要なプロパティの 1 つは、 request プロパティです。 launchとattachの 2 種類のrequestがあります。

次のコードは、(アプリの実行中のインスタンスにデバッガーをアタッチするのではなく) Visual Studio Code からアプリを起動する方法を示しています。 これを行うには、アプリが以前にビルドされている必要があります。 プロジェクトにlaunch.jsonファイルがない場合は、現在のプロジェクトの.vscode サブフォルダーに新しいlaunch.json ファイルを作成し、次のコードを貼り付けます。

"name": "Hello debug world",
"type": "msedge",
"port": 9222, // The port value is optional, and the default value is 9222.
"request": "launch",
"runtimeExecutable": "C:/path/to/your/webview2/app.exe",
"env": {
   // The following variable is needed when the "runtimeExecutable" property is set.
   // The port number below must match the value of the "port" property above.
   "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=9222" 
   // Customize for your app ___location.
   "Path": "%path%;e:/path/to/your/app/___location; "
},
"useWebView": true,
// The following two lines set up source path mapping, where "url" is the start page
// of your app, and "webRoot" is the top-level directory containing all your code files.
"url": "file:///${workspaceFolder}/path/to/your/toplevel/foo.html",
"webRoot": "${workspaceFolder}/path/to/your/assets"

レジストリ値の使用

WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS環境変数を設定する代わりに、<myApp.exe> という名前の新しいレジストリ値とデータ --remote-debugging-port=9222をレジストリ キー Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentsの下のレジストリに追加して、デバッガーが適切なポートを見つけられるようにすることができます。 詳細については、「 WewbView2 ブラウザー フラグ」を参照してください。

渡されたコマンド ライン URL パラメーター

Visual Studio Code のソース パス マッピングには URL が必要になるため、アプリの起動時に url コマンド ライン パラメーターを受け取るようになりました。 必要に応じて、 url パラメーターは無視しても問題ありません。

コードをデバッグする

1. ソース コードでブレークポイントを設定するには、コード行をクリックし、 F9 キーを押します。

   

2. [ 実行 ] タブで、ドロップダウン メニューから起動構成を選択します。

3. [ デバッグの開始] をクリックします。これは、起動構成ドロップダウン リストの横にある緑色の三角形です。

   

4. デバッグ出力とエラーを表示するには、 デバッグ コンソールを開きます。

   

対象の WebView2 デバッグ

一部の WebView2 アプリでは、複数の WebView2 コントロールを使用する場合があります。 この状況でデバッグする WebView2 コントロールを選択するには、対象の WebView2 デバッグを使用できます。

launch.jsonを開き、次のアクションを実行して、対象の WebView2 デバッグを使用します。

1. useWebview パラメーターが true に設定されていることを確認します。

2. urlFilter パラメーターを追加します。 WebView2 コントロールが URL に移動すると、 urlFilter パラメーター値を使用して、URL に表示される文字列が比較されます。

"useWebview": "true",
"urlFilter": "*index.ts",

// Options for "urlFilter":
// Match any url that ends with "index.ts":
"urlFilter": "*index.ts",
// Match any url that contains "index" anywhere in the URL:
"urlFilter": "*index*",
// Explicitly match a file named "index.ts":
"urlFilter": "file://C:/path/to/my/index.ts",

アプリをデバッグするときに、レンダリング プロセスの先頭からコードをステップ実行する必要がある場合があります。 サイトで Web ページをレンダリングしていて、ソース コードにアクセスできない場合は、web ページが認識できないパラメーターを無視するため、 ?=value オプションを使用できます。

2 つの WebView2 コントロールを同時にデバッグできない

URL で最初の一致が見つかった後、デバッガーは停止します。 CDP ポートはすべての WebView2 コントロールによって共有され、1 つのポート番号を使用するため、2 つの WebView2 コントロールを同時にデバッグすることはできません。

実行中のプロセスをデバッグする

実行中の WebView2 プロセスにデバッガーをアタッチする必要がある場合があります。 これを行うには、 launch.jsonで request パラメーターを更新し、その値を attach に変更します。

"name": "Hello debugging world",
"type": "msedge",
"port": 9222,
"request": "attach",
"runtimeExecutable": "C:/path/to/your/webview2/myApp.exe",
"env": {
   "Path": "%path%;e:/path/to/your/build/___location; "
}

WebView2 コントロールのデバッグを許可するには、WebView2 コントロールで Chrome Developer Protocol (CDP) ポートを開く必要があります。 デバッガーを起動する前に、1 つの WebView2 コントロールのみが CDP ポートを開くよう、コードをビルドする必要があります。

また、デバッガーが適切なポートを見つけられるように、Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentsの下に新しい REGKEY <myApp.exe> = --remote-debugging-port=9222を追加する必要もあります。 このレジストリ キーを追加するには:

1. Windows ロゴ キーを押し、レジストリ エディターを検索します。 レジストリ エディター アプリを開き、[はい] をクリックして編集を許可します。

2. 左側のフォルダー ツリーで、 HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentsを展開してみてください。

3. そのパスの \Edge\WebView2\AdditionalBrowserArguments 部分が存在しない場合は、次のように、これらの 3 つの入れ子になったサブフォルダーを作成します。

   1. \Edge サブフォルダーを作成するには、フォルダー ツリーで、HKEY_CURRENT_USER\Software\Policies\Microsoft フォルダーを右クリックし、[新規] にマウス ポインターを合わせて、[キー] を選択します。 フォルダーは、最初は New Key #1 という名前のMicrosoft フォルダーの子として追加されます。 New Key #1 フォルダーを右クリックし、[名前の変更] を選択します。 新しいキーの名前として「 Edge 」と入力します。

   2. 前の手順と同様に、 \WebView2 サブフォルダーを作成します。

   3. 前の手順と同様に、 \AdditionalBrowserArguments サブフォルダーを作成します。

      ツリーが HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentsに展開されるようになりました。

4. AdditionalBrowserArguments フォルダーを右クリックし、[新規] にカーソルを合わせて、[文字列値] を選択します。 [ 名前 ] 列で New Value #1右クリックし、[ 名前の変更] を選択し、アプリ実行可能ファイルのファイル名 ( myApp.exeなど) を入力します。

5. [ 名前 ] 列で、実行可能ファイル名 ( myApp.exeなど) を右クリックし、[ 変更] を選択します。 [ 文字列の編集] ダイアログが開きます。

6. [ 値データ ] テキスト ボックスに「 --remote-debugging-port=9222」と入力します。

   

7. [ OK ] ボタンをクリックし、レジストリ キーが次のキーと一致することを確認します ([名前] 列の .exe ファイルのファイル 名 )。

   

環境変数の使用

上記のレジストリ キーを追加する代わりに、 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 環境変数を --remote-debugging-port=9222 に設定できます。 環境変数が設定された後にアプリケーションが起動されていることを確認し、アプリケーションが環境変数を継承していることを確認します。 詳細については、「 WewbView2 ブラウザー フラグ」を参照してください。

デバッグ トレース オプション

デバッグ トレースを有効にするには、次のように trace パラメーターを launch.json に追加します。

1. trace パラメーターを追加します。

"name": "Hello debugging world",
"type": "msedge",
"port": 9222,
"request": "attach",
"runtimeExecutable": "C:/path/to/your/webview2/app.exe",
"env": {
"Path": "%path%;e:/path/to/your/build/___location; "
},
"useWebView": true
,"trace": true  // Turn on debug tracing, and save the output to a log file.

デバッグ出力をログ ファイルに保存する:

,"trace": "verbose"  // Turn on verbose tracing in the Debug Output pane.

[ デバッグ コンソール ] ウィンドウの Visual Studio Code 出力。詳細トレースが有効になっています。

Office アドインをデバッグする

Office アドインをデバッグする場合は、Visual Studio Code の別のインスタンスでアドインのソース コードを開きます。 WebView2 アプリで launch.json を開きます。 次のコードを launch.jsonに追加して、デバッガーを Office アドインにアタッチします。

,"debugServer": 4711

WebView2 WinUI 2 (UWP) アプリをデバッグする

1. 106.0.1370.34を過ぎた WebView2 ランタイム バージョンをインストールします。

2. Windows ロゴ キーを押してレジストリ エディターを開き、レジストリ エディターを検索します。 レジストリ エディター アプリケーションを開き、[はい] を選択して編集を許可します。

3. レジストリ キーを --remote-debugging-pipe と等しいHKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments設定します。 これを行うには、上記の「実行中のプロセスの デバッグ 」セクションで説明されている手順に従います。

4. エディターでレジストリ キーが設定され、次と一致することを確認します。

   

5. launch.json ファイルに新しい構成を追加します。 launch.jsonを開き、次のコードを追加します。

   "name": "Attach to UWP App",
   "useWebView":{
      "pipeName":"JSDebugPipe"
   }
   "request": "attach",
   "type": "msedge",
   "webRoot":"${workspaceFolder}"
   

6. アプリを起動します。

7. [ デバッグの開始 ] ボタンをクリックしてプロセスにアタッチし、デバッグを開始します。

   

WebResourceRequested イベントまたは仮想ホスト名マッピングを含むソース マップ

コンパイル済みコンテンツのソース コードをデバッグするには、次のようなソース マップが必要です。

• TypeScript や縮小された JavaScript など、変換された JavaScript。
• SASS や SCSS などのコンパイル済み CSS。

WebView2 では、次のいずれかの方法を使用して読み込まれたコンテンツによって参照されるソース マップは読み込まれません。

• WebResourceRequested イベント。 参照:

  • WebView2 アプリでのローカル コンテンツの使用に関するページのWebResourceRequested イベントを処理して、ローカル コンテンツを読み込みます。
  • ソースは、「WebView2 アプリでローカル コンテンツを使用する」のWebResourceRequested イベントと共にマップされます。

• 仮想ホスト名マッピング。 参照:

  • 「WebView2 アプリでのローカル コンテンツの使用」の仮想ホスト名マッピングを使用したローカル コンテンツの読み込み。
  • 「WebView2 アプリでのローカル コンテンツの使用」の仮想ホスト名マッピングを使用したソース マップ。

デバッガーのトラブルシューティング

デバッガーを使用すると、これらのシナリオが発生する可能性があります。

ブレークポイントで停止しない

デバッガーがブレークポイントで停止せず、デバッグ出力がある場合:

この問題を解決するには、ブレークポイントを持つファイルが WebView2 コントロールで使用されているファイルと同じファイルであることを確認します。 デバッガーはソース パス マッピングを実行しません。

実行中のプロセスにアタッチできない

実行中のプロセスにアタッチできない場合は、タイムアウト エラーが発生します。

この問題を解決するには、WebView2 コントロールが CDP ポートを開いたかどうかを確認します。 レジストリの additionalBrowserArguments 値が正しいか、オプションが正しいことを確認します。 dotnet の場合は追加のBrowserArguments、Win32 の場合は追加のBrowserArgumentsを参照してください。

関連項目

• WebView2 の概要
• WebView2Samples リポジトリ - WebView2 機能の包括的な例。
• WebView2 API リファレンス