Windows Phone 8 IE10 Javascript 调试

Posted 2023-03-04

【中文标题】Windows Phone 8 IE10 Javascript 调试

【英文标题】：Windows Phone 8 IE10 Javascript debugging

【发布时间】：2013-01-12 02:43:32

【问题描述】：

IE10 在 html5 合规性方面有一些出色的增强，但在 WP8 上运行时仍然无法开发 javascript HTML5，因为除了控制台消息之外无法调试应用程序。

在 WP8 上运行的 IE10 是否可以像 WebKit 手机浏览器一样提供远程调试体验（例如，请参阅我在 http://www.youtube.com/watch?v=GNAjzFpNEj4 的视频）。当使用 USB 电缆连接到桌面 Safari 时，在 ios 上调试 Javascript 应用程序很容易，因为可以设置断点并在远程调试器中检查变量。我希望 IE10 中也有相同的功能，并且希望了解有关在何处启用这些非常需要的功能的任何信息。

【参考方案1】：

坏消息，与 WP7/IE9 相比没有新的调试功能。请查看How do I debug Internet Explorer on Windows Phone 7?，因为我们在 WP8 上的情况完全相同。

我个人每天使用的东西

尽可能在 IE10 Desktop 中调试您的应用

Weinre 远程调试器。 Demo video.您可以使用以下基于Weinre的应用程序来简化其使用（无需本地设置）-IeMobileDebugger src或link to Store

支持

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

不支持

js 断点

对于 javascript 逐行调试，请使用 aardwolf。 Demo with VS integration。

将控制台跟踪重定向到 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);
    ;           

【讨论】：

谢谢，这非常有帮助，但我对追踪感到好奇。你是说如果我在手机模拟器中运行我的 Phonegap 应用程序，我会在 Visual Studio 中看到控制台输出吗？这本身就是个好消息，可惜 IE 团队没有研究 Webkit 调试在手机上的工作原理，因为它很棒！

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

很好的答案！使用 Cordova/PhoneGap 我只需要添加“WebBrowser Browser = new WebBrowser();”到 MainPage 类

我相信'WebBrowser Browser = new WebBrowser();'该行不是必需的，因为浏览器控件实例必须已经在 MainPage 上，并且调用 Browser_Loaded 方法而不是加载该控件。

其实已经不是这样了。 Weinre 支持 IE10+ 和 FF。

【参考方案2】：

FWIW：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

【讨论】：

注意你需要VS 2013/VS 2015。

【参考方案3】：

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