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": {
// Customize for your app location if needed
"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 with all your code files.
"url": "file:///${workspaceFolder}/path/to/your/toplevel/foo.html",
"webRoot": "${workspaceFolder}/path/to/your/assets"
渡されたコマンド ライン URL パラメーター
Visual Studio Code のソース パス マッピングには URL が必要になるため、アプリの起動時に url
コマンド ライン パラメーターを受け取るようになりました。 必要に応じて、 url
パラメーターは無視しても問題ありません。
コードをデバッグする
ソース コードでブレークポイントを設定するには、コード行をクリックし、 F9 キーを押します。
[ 実行 ] タブで、ドロップダウン メニューから起動構成を選択します。
[ デバッグの開始] をクリックします。これは、起動構成ドロップダウン リストの横にある緑色の三角形です。
デバッグ出力とエラーを表示するには、 デバッグ コンソールを開きます。
対象の WebView2 デバッグ
一部の WebView2 アプリでは、複数の WebView2 コントロールを使用する場合があります。 この状況でデバッグする WebView2 コントロールを選択するには、対象の WebView2 デバッグを使用できます。
launch.json
を開き、次のアクションを実行して、対象の WebView2 デバッグを使用します。
useWebview
パラメーターがtrue
に設定されていることを確認します。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; "
},
"useWebView": true
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
を追加する必要もあります。 このレジストリ キーを追加するには:
Windows ロゴ キーを押し、レジストリ エディターを検索します。 レジストリ エディター アプリを開き、[はい] をクリックして編集を許可します。
左側のフォルダー ツリーで、
HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments
を展開してみてください。そのパスの
\Edge\WebView2\AdditionalBrowserArguments
部分が存在しない場合は、次のように、これらの 3 つの入れ子になったサブフォルダーを作成します。\Edge
サブフォルダーを作成するには、フォルダー ツリーで、HKEY_CURRENT_USER\Software\Policies\Microsoft
フォルダーを右クリックし、[新規] にマウス ポインターを合わせて、[キー] を選択します。 フォルダーは、最初はNew Key #1
という名前のMicrosoft
フォルダーの子として追加されます。New Key #1
フォルダーを右クリックし、[名前の変更] を選択します。 新しいキーの名前として「Edge
」と入力します。前の手順と同様に、
\WebView2
サブフォルダーを作成します。前の手順と同様に、
\AdditionalBrowserArguments
サブフォルダーを作成します。ツリーが
HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments
に展開されるようになりました。
AdditionalBrowserArguments
フォルダーを右クリックし、[新規] にカーソルを合わせて、[文字列値] を選択します。 [ 名前 ] 列でNew Value #1
右クリックし、[ 名前の変更] を選択し、アプリ実行可能ファイルのファイル名 (myApp.exe
など) を入力します。[ 名前 ] 列で、実行可能ファイル名 (
myApp.exe
など) を右クリックし、[ 変更] を選択します。 [ 文字列の編集] ダイアログが開きます。[ 値データ ] テキスト ボックスに「
--remote-debugging-port=9222
」と入力します。[ OK ] ボタンをクリックし、レジストリ キーが次のキーと一致することを確認します ([名前] 列の
.exe
ファイルのファイル 名 )。
デバッグ トレース オプション
デバッグ トレースを有効にするには、次のように trace
パラメーターを launch.json
に追加します。
-
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) アプリをデバッグする
106.0.1370.34
を過ぎた WebView2 ランタイム バージョンをインストールします。Windows ロゴ キーを押してレジストリ エディターを開き、レジストリ エディターを検索します。 レジストリ エディター アプリケーションを開き、[はい] を選択して編集を許可します。
レジストリ キーを
--remote-debugging-pipe
と等しいHKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments
設定します。 これを行うには、上記の「実行中のプロセスの デバッグ 」セクションで説明されている手順に従います。エディターでレジストリ キーが設定され、次と一致することを確認します。
launch.json
ファイルに新しい構成を追加します。launch.json
を開き、次のコードを追加します。"name": "Attach to UWP App", "useWebView":{ "pipeName":"JSDebugPipe" } "request": "attach", "type": "msedge", "webRoot":"${workspaceFolder}"
アプリを起動します。
[ デバッグの開始 ] ボタンをクリックしてプロセスにアタッチし、デバッグを開始します。
デバッガーのトラブルシューティング
デバッガーを使用すると、これらのシナリオが発生する可能性があります。
ブレークポイントで停止しない
デバッガーがブレークポイントで停止せず、デバッグ出力がある場合:
この問題を解決するには、ブレークポイントを持つファイルが WebView2 コントロールで使用されているファイルと同じファイルであることを確認します。 デバッガーはソース パス マッピングを実行しません。
実行中のプロセスにアタッチできない
実行中のプロセスにアタッチできない場合は、タイムアウト エラーが発生します。
この問題を解決するには、WebView2 コントロールが CDP ポートを開いたかどうかを確認します。 レジストリの additionalBrowserArguments
値が正しいか、オプションが正しいことを確認します。
dotnet の場合は追加のBrowserArguments、Win32 の場合は追加のBrowserArgumentsを参照してください。
関連項目
- WebView2 の概要
- WebView2Samples リポジトリ - WebView2 機能の包括的な例。
- WebView2 API リファレンス