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

WebView2 コントロールで実行されるスクリプトをデバッグするには、Visual Studio Code を使用します。

詳細な内容:

概要

WebView2 コントロールで実行されるスクリプトをデバッグするには、Visual Studio Code を使用します。

Visual Studio Code には、ブラウザーのデバッグ用のデバッガーが組み込まれています。 VS Code でのブラウザーのデバッグを参照してください。

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

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

次のコードは、(アプリの実行中のインスタンスにデバッガーをアタッチするのではなく) 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 環境変数を設定する代わりに、レジストリ キー Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments の下のレジストリにデータが--remote-debugging-port=9222<myApp.exe>という名前の新しいレジストリ値を追加すれば、デバッガーが適切なポートを検索できるようになります。 詳細については、「 WebView2 ブラウザー フラグ」を参照してください。

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

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

コードをデバッグする

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

    Visual Studio Code で設定されたブレークポイント

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

  3. [ Start Devaging] (起動構成) ドロップダウン リストの横にある緑色の三角形をクリックします。

    Visual Studio Code の [実行] タブ

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

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

対象 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 開発者プロトコル (CDP) ポートを開く必要があります。 デバッガーを起動する前に、CDP ポートが開かれている WebView2 コントロールが 1 つだけであることを確認するようにコードを作成する必要があります。

また、デバッガーが適切なポートを検索できるように、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 フォルダーを右クリックし、[新規] をポイントして、[キー] を選択します。 Microsoft フォルダーの子 (最初は New Key #1 という名前) にフォルダーが追加されます。 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 に設定できます。 環境変数を設定した後にアプリケーションが起動することを確認し、アプリケーションが環境変数を継承していることを確認します。 詳細については、「 WebView2 ブラウザー フラグ」を参照してください。

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

デバッグ トレースを有効にするには、次のように 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 の DEBUG CONSOLE ウィンドウの出力:

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

  4. レジストリ キーがエディターに設定されており、次の内容と一致していることを確認します。

    AdditionalBrowserArguments レジストリ キーを --remote-debugging-pipe に設定する

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

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

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

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

    実行とデバッグ

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

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

  • トランスパイルされた JavaScript (TypeScript や縮小された JavaScript など)。
  • SASS や SCSS などのコンパイルされた CSS

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

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

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

ブレークポイントで止まらない

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

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

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

実行中のプロセスにアタッチできず、タイムアウト エラーが発生する場合:

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

関連項目

  • Last updated on