次の方法で共有

Microsoft Edge DevTools を使用して WebView2 アプリをデバッグする

  • [アーティクル]

Microsoft Edge 開発者ツールを使用して、WebView2 コントロールに表示される Web コンテンツを、Microsoft Edge に表示されている別の Web ページをデバッグするのと同じ方法でデバッグします。

WebView2 コントロールでの DevTools デバッグ

WebView2 アプリを使用している場合、DevTools を開くにはいくつかの方法があります。

  • F12 キーを押します。
  • Ctrl + Shift + I キーを押します。
  • ページを右クリックし、[ Inspect] を選択します。

アプリでは、 OpenDevToolsWindow API を使用してプログラムによって DevTools ウィンドウを開くこともできます。 たとえば、上記のホットキーとコンテキスト メニュー項目が削除されている場合は、この方法を使用できます。

上記の方法を使用できない場合は、環境変数またはレジストリ キーを使用してブラウザーの引数に --auto-open-devtools-for-tabs を追加できます。 この方法では、WebView2 の作成時に DevTools ウィンドウが開きます。

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

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

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

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

関連項目