Freigeben über

Debuggen von WebView2-Apps mit Microsoft Edge DevTools

  • Artikel

Verwenden Sie Microsoft Edge-Entwicklertools, um Webinhalte, die in WebView2-Steuerelementen angezeigt werden, auf die gleiche Weise zu debuggen, wie Sie eine andere Webseite debuggen können, die in Microsoft Edge angezeigt wird.

Debuggen von DevTools in einem WebView2-Steuerelement

Wenn Sie eine WebView2-App verwenden, gibt es mehrere Möglichkeiten, DevTools zu öffnen:

  • Drücken Sie F12.
  • Drücken Sie STRG+UMSCHALT+I.
  • Klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie dann aus Inspect.

Eine App kann die OpenDevToolsWindow API auch verwenden, um ein DevTools-Fenster programmgesteuert zu öffnen. Sie können diesen Ansatz beispielsweise verwenden, wenn die oben genannten Hotkeys und die Kontextmenüelemente entfernt wurden.

Wenn keiner der oben genannten Ansätze verfügbar ist, können Sie den Browserargumenten über eine Umgebungsvariable oder einen Registrierungsschlüssel hinzufügen --auto-open-devtools-for-tabs . Dieser Ansatz öffnet ein DevTools-Fenster, wenn eine WebView2 erstellt wird.

Quellzuordnungen mit der Zuordnung des WebResourceRequested Ereignisses oder virtuellen Hostnamens

Quellzuordnungen sind erforderlich, um den Quellcode von kompilierten Inhalten zu debuggen, einschließlich:

  • Transpiliertes JavaScript, z. B. TypeScript oder minimiertes JavaScript.
  • Kompiliertes CSS, z. B. SASS oder SCSS.

WebView2 lädt keine Quellzuordnungen, auf die durch Inhalt verwiesen wird, der mit einem der beiden Methoden geladen wurde:

Siehe auch