Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Win8 XAML App : how to debug the javascript in a WebView !

DZone's Guide to

Win8 XAML App : how to debug the javascript in a WebView !

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

 When you build a Windows 8 Xaml app you sometimes need to put a WebView in it and run some custom Javascript in the loaded html page. I recommend you to read this MSDN blog post about this control.

It can be hard to debug the injected Javascript when you are used to the great debugging experience of VS2012 and loose it.

In fact, there is one little, simple, really easy thing to do which will save you a lot of time…

The first thing I tried to do was to create a “fake” HTML element and dump my message into the DOM. That was not the best possible experience because I was loosing the “debugging” experience (pause, display values, etc.) but I was able to have some information at least.

Then an idea struck my mind : why not changing the debugger type as I do when I debug C++/CX apps ? That was the solution!

To have the same user experience than the one in WinJS apps or classic web app, you just have to set the debugger type to “script” in your app project.
DebugJavascript

Even the Dom Explorer is available to find out elements in your page.

I knew that Visual Studio was a really great IDE but I think that this kind of feature is just awesome and enable us to have the best possible productivity.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}