Debuggen eines WebView-Steuerelements

Um WebView-Steuerelemente in einer Windows-Runtime-App zu überprüfen und zu debuggen, können Sie Visual Studio so konfigurieren, dass es den Skriptdebugger anfügt, wenn Sie Ihre App starten. Ab Visual Studio 2013 Update 2 haben Sie zwei Möglichkeiten für die Interaktion mit den WebView-Steuerelementen bei Verwendung des Debuggers:

• Öffnen Sie den DOM Explorer für eine WebView-Instanz und prüfen Sie DOM-Elemente, untersuchen Sie CSS-Formatvorlagenprobleme und testen Sie dynamisch gerenderte Änderungen an Formatvorlagen.

• Wählen Sie die Webseite oder den iFrame, die in der WebView-Instanz angezeigt werden, als Ziel im JavaScript-Konsolenfenster und interagieren Sie dann über Konsolenbefehle mit der Webseite. Die Konsole bietet Zugriff auf den aktuellen Skriptausführungskontext.

Anfügen des Debuggers (C#, Visual Basic, C++)

1. In Visual Studio: Fügen Sie ein WebView-Steuerelement an Ihre Windows-Runtime-App an.

2. Im Projektmappen-Explorer: Öffnen Sie die Eigenschaften für das Projekt, indem Sie im Kontextmenü auf Eigenschaften gehen.

3. Wählen Sie Debuggen aus. Gehen Sie in der Liste der Anwendungsprozesse auf Skript.

   

4. (Optional) Für Nicht-Express-Versionen von Visual Studio: Deaktivieren Sie das Just-in-time- (JIT-) Debuggen, indem Sie Extras, Optionen, Debuggen und Just-In-Time auswählen und dann das JIT-Debuggen für Skript deaktivieren.

   Hinweis

   Indem Sie das JIT-Debuggen deaktivieren, können Sie Dialogfelder für unbehandelte Ausnahmen ausblenden, die auf einigen Webseiten auftreten.In Visual Studio Express ist das JIT-Debuggen stets deaktiviert.

5. Drücken Sie die Taste F5, um mit dem Debuggen zu beginnen.

Verwenden des DOM Explorers, um ein WebView-Steuerelement zu untersuchen und zu debuggen

1. (C#, Visual Basic, C++) Fügen Sie den Skriptdebugger an Ihre App an. Die Anleitung dazu finden Sie im ersten Abschnitt.

2. Fügen Sie ein WebView-Steuerelement an Ihre App an, wenn Sie dies noch nicht getan haben, und drücken Sie F5, um mit dem Debuggen zu beginnen.

3. Navigieren Sie zu der Seite, die die Webview-Steuerelemente enthält.

4. Öffnen Sie das DOM Explorer-Fenster für das WebView-Steuerelement, indem Sie Debuggen, Windows, DOM Explorer und dann die URL des zu untersuchenden WebView auswählen.

   

   Der mit dem WebView verknüpfte DOM Explorer erscheint als neue Registerkarte in Visual Studio.

5. Zeigen Sie Live-DOM-Elemente und CSS-Formatvorlagen an und ändern Sie diese wie unter Debuggen von CSS-Stilen mithilfe von DOM Explorer beschrieben.

Verwenden des JavaScript-Konsolenfensters, um ein WebView-Steuerelement zu untersuchen und zu debuggen

1. (C#, Visual Basic, C++) Fügen Sie den Skriptdebugger an Ihre App an. Die Anleitung dazu finden Sie im ersten Abschnitt.

2. Fügen Sie ein WebView-Steuerelement an Ihre App an, wenn Sie dies noch nicht getan haben, und drücken Sie F5, um mit dem Debuggen zu beginnen.

3. Öffnen Sie das JavaScript-Konsolenfenster für das WebView-Steuerelement, indem Sie Debuggen, Windows, JavaScript-Konsole auswählen.

   Das JavaScript-Konsolenfenster wird angezeigt.

4. Navigieren Sie zu der Seite, die die Webview-Steuerelemente enthält.

5. Wählen Sie im Konsolenfenster die Webseite oder einen iFrame, der durch das WebView-Steuerelement in der Liste der Ziele angezeigt wird.

   

   Hinweis

   Mithilfe der Konsole können Sie jeweils mit einem einzelnen WebView, iFrame, Freigabe-Vertrag oder Web-Worker interagieren.Jedes Element erfordert eine separate Instanz des Webplattform-Hosts (WWAHost.exe).Sie können jeweils mit einem Host interagieren.

6. Zeigen Sie Variablen in Ihrer App an und ändern Sie diese oder verwenden Sie Konsolenbefehle, wie unter Schnellstart: Debuggen von JavaScript mit der Konsole und JavaScript-Konsolenbefehle beschrieben.

Siehe auch

Konzepte

Schnellstart: Debuggen von HTML und CSS