Windows Phone 8 IE10 Javascript debugging

Question

IE10 has some wonderful enhancements in the HTML5 compliance area but remains a bear to develop JavaScript HTML5 when running on the WP8 as there is no way to debug the app except console messages.

Is there a remote debugging experience available for IE10 running on WP8 like the WebKit phone browsers have(see my video at http://www.youtube.com/watch?v=GNAjzFpNEj4 for example). When this is in place with a USB cable to desktop Safari debugging Javascript apps on IOS is easy as breakpoints can be set and variables examined in the remote debugger . I am hoping the same capabilities are in IE10 and would appreciate any information on where to enable these very much needed capabilities.

Answer 1

The bad news, that there is no new debug capabilities in comparison to WP7/IE9. Please take a look on How do I debug Internet Explorer on Windows Phone 7? since we are in exactly the same situation on WP8.

What I personally use on daily basis

1. Debug your app in IE10 Desktop as much as possible

2. Weinre remote debugger. Demo video. You can use the following app based on Weinre to simplify its usage (no local setup needed) - IeMobileDebugger src or link to Store

   Supports

   Html traversing Html node styles, properties, metrics Reading console output Executing js on device side from console (including intellisense) Dynamic script injection - ability to debug live sites

   Not supported

   js breakpoints

3. For javascript line by line debugging use aardwolf. Demo with VS integration.

4. To redirect console trace to Visual Studio output and be able to use console.log("some message") for tracing

index.html:

<script type="text/javascript">
    window.console = {
        log: function (str) { window.external.Notify(str); }
    };

    // output errors to console log
    window.onerror = function (e) {
        console.log("window.onerror ::" + JSON.stringify(e));
    };

    console.log("Installed console !");
</script>

MainPage.xaml.cs

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    Browser.IsScriptEnabled = true;
    // Add your URL here
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));

    Browser.ScriptNotify += (s, arg) =>
    {
        Debug.WriteLine(arg.Value);
    };           
}

Answer 2

FWIW: Windows Phone 8.1 finally supports remote debugging. See http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx

Answer 3

While not a full solution, Lauri Piispanen's consolelog.js, a nodejs-based remote JS console logger could help you.