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


VSSAvedMyDayWhen 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.

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.


6 Responses

  1. @gekido

    17/07/2014 1 h 07 min

    Is there something that we need to do to enable the javascript debug option? I only have 'managed' and 'native' for debugger options. Looks like that dialog has changed with Visual Studio 2013.2 possibly?

    Thanx in advance.

Comments are closed.