Visual Studio is a fantastic IDE with rich debugging tools that make every developer’s life much easier. Developing your UWP apps and debugging managed or native code with Visual Studio is a breeze. Simply choose the debugger type in your project’s debug settings, start debugging, and away you go. In a mixed code app, you can debug managed code and native code independently, or you can debug both at the same time.
However, like any massively complex development tool, Visual Studio is not without its shortcomings. If you add a
In this blog post, I’ll show you how to use the new support in the Microsoft Edge DevTools Preview app for
WebView content hosted in UWP apps to improve your debugging experience.
In order to use the Edge DevTools Preview app for debugging
WebView content, you must have OS Build 16299.579 of Windows 10 or later. Install the Microsoft Edge DevTools Preview app, which is available in the Microsoft App Store.
To debug with the Edge DevTools, set your debugger type to any type other than Script and start debugging the app. Once the app is launched, start the Edge DevTools, or if it’s already running, click on Refresh in the top right of the app.
You will be presented with a list of Debug Targets. You should be able to identify your running app as soon the app displays the
WebView with some content loaded. Note that you may even see it twice if you have the page containing the
WebView open in the XAML Designer. This is a separate instance of the
WebView, and it runs inside Visual Studio as opposed to in your app.
Click on the process entry you want to debug (located in the list), and a new window containing the debugging tools will open. In the main window of the DevTools app, the process entry will display a label indicating the developer tools are attached to the selected process.
In the window containing the debugging tools attached to the process, you can set breakpoints, inspect the DOM tree, inspect CSS, and profile memory and performance. You can now also simultaneously set breakpoints in managed and native code, which is enormously helpful in situations such as debugging Windows Runtime Components that are injected into the
The DevTools app is still in preview, so you should expect some rough edges here and there (no pun intended). One particularly aggravating limitation right now is that there seems to be no way to get the tools to attach to the process automatically. This means you still have to rely on Script debugging in Visual Studio if you need to debug from the very first moment the
WebView loads content. Hopefully Microsoft will have a solution for that by the time the tools are out of preview. Fortunately, we shouldn’t have to wait for new versions of Visual Studio to get new features for developing web content, as these tools will be updated independently.
WebView-hosted content in UWP apps no longer needs to be a slow, buggy, and limited experience. The Edge DevTools Preview app relieves you of most pain points while presenting you with a more familiar set of web development tools that work well with Visual Studio debugging.