Windows Phone 8 IE10 JavaScript调试

Question

IE10在HTML5兼容性方面有一些出色的增强功能，但在WP8上运行JavaScript HTML5开发仍然是一项棘手的任务，因为除了控制台消息外，没有办法调试应用程序。

IE10在WP8上是否有远程调试体验，就像WebKit手机浏览器一样（例如请参见我的视频：http://www.youtube.com/watch?v=GNAjzFpNEj4）。当这个工具在使用USB电缆连接到桌面Safari进行调试时，可以轻松设置断点并在远程调试器中检查变量，使得在IOS上调试JavaScript应用程序非常容易。我希望IE10具有相同的功能，并且希望获得关于启用这些非常必要的功能的任何信息。

- John Mcfetridge

Answer 1

不好的消息是，与WP7 / IE9相比，没有新的调试能力。请参阅如何在Windows Phone 7上调试Internet Explorer？，因为我们在WP8上处于完全相同的情况。

我个人日常使用以下方式：

1. 尽可能在IE10桌面版中调试您的应用程序

2. Weinre 远程调试器。演示视频。 您可以使用基于Weinre的以下应用程序来简化它的使用（无需本地设置）- IeMobileDebugger源代码 或商店链接

   支持

   HTML遍历 Html节点样式、属性、度量 读取控制台输出 从控制台执行设备端JS（包括智能感知） 动态脚本注入-能够调试实时站点

   不支持

   JS断点

3. 对于JavaScript逐行调试，请使用Aardwolf。与VS集成的演示。

4. 将控制台跟踪重定向到Visual Studio输出，以便能够使用console.log("some message")进行跟踪

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);
    };           
}

- Sergei Grebnov

---

谢谢，这对我非常有帮助，但我对追踪部分很好奇。你是说如果我在手机模拟器上运行我的Phonegap应用程序，我会在Visual Studio中看到控制台输出吗？这本身是个好消息，只可惜IE团队没有关注Webkit调试在手机上的工作方式，它非常出色！ - John Mcfetridge

是的，在Cordova/PhoneGap中，console.log()调用会被重定向到Visual Studio输出窗口。 - Sergei Grebnov

太棒了！使用Cordova/PhoneGap，我只需要在MainPage类中添加“WebBrowser Browser = new WebBrowser();”即可。 - Juha Palomäki

我认为“WebBrowser Browser = new WebBrowser();”这行代码是不必要的，因为Browser控件实例必须已经在MainPage上，并且当调用Browser_Loaded方法时，该控件已经被加载。 - Sergei Grebnov

除了winre仅适用于Webkit浏览器外，因此没有机会在“Windows Phone”/“IE”上使用。 - DATEx2

实际上这已经不再是真的了。Weinre支持IE10+和FF。 - Sergei Grebnov

Answer 2

值得一提的是：Windows Phone 8.1 终于支持远程调试了。请参见http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx

- mikaraento

---

请注意，您需要使用VS 2013 / VS 2015。 - Alexei Levenkov

Answer 3

虽然不是完整解决方案，但 Lauri Piispanen 的 consolelog.js 可以作为基于 nodejs 的远程 JS 控制台记录器来帮助你。

- Esko