| title | Debug WebView2 apps with Microsoft Edge DevTools |
|---|---|
| description | How to open Microsoft Edge DevTools when using a WebView2 app. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.technology | webview |
| ms.date | 07/07/2022 |
Use Microsoft Edge Developer Tools to debug web content displayed in WebView2 controls, in the same way that you can debug another webpage that's displayed in Microsoft Edge.
When you're using a WebView2 app, there are several ways to open DevTools:
- Press
F12. - Press
Ctrl+Shift+I. - Right-click the page and then select
Inspect.
An app can also use the OpenDevToolsWindow API to programmatically open a DevTools window. For example, you can use this approach if the above hotkeys and the context menu items have been removed.
If none of the above approaches are available, you can add --auto-open-devtools-for-tabs to the browser arguments via an environment variable or registry key. This approach will open a DevTools window when a WebView2 is created.
- Overview of DevTools.
- Get started with WebView2
- WebView2Samples repo - a comprehensive example of WebView2 capabilities.
- WebView2 API reference
- See also in Introduction to Microsoft Edge WebView2.