24

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.

Esko
  • 29,022
  • 11
  • 55
  • 82
John Mcfetridge
  • 1,167
  • 1
  • 10
  • 15

3 Answers3

22

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);
    };           
}
Community
  • 1
  • 1
Sergei Grebnov
  • 2,633
  • 18
  • 24
  • thanks this is extremely helpful but I was curious about the tracing. Are u saying that if I am in phone simulator running my Phonegap app I will see the console output in Visual Studio? That is good news in itself , just too bad the IE team does not look at how Webkit debugging works on the phones as it is wonderful! – John Mcfetridge Jan 30 '13 at 14:43
  • 1
    Yes, under Cordova/PhoneGap console.log() calls are redirected to Visual Studio Output window. – Sergei Grebnov Jan 30 '13 at 16:16
  • Great answer! With Cordova/PhoneGap I just had to add "WebBrowser Browser = new WebBrowser();" to the MainPage class – Juha Palomäki Sep 01 '13 at 19:41
  • I believe 'WebBrowser Browser = new WebBrowser();' line is not required since Browser control instance must be already on the MainPage and the Browser_Loaded method is called than that control is being loaded. – Sergei Grebnov Jan 08 '14 at 10:30
  • Except that winre is only available for webkit browsers, hence no chance for `Windows Phone` / `IE` – DATEx2 Mar 17 '14 at 15:02
  • 1
    Actually it is not longer true. Weinre supports IE10+ and FF. – Sergei Grebnov Mar 18 '14 at 14:35
17

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

mikaraento
  • 1,689
  • 14
  • 12
0

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

Esko
  • 29,022
  • 11
  • 55
  • 82