如何在Xcode中查看PhoneGap应用程序的javascript错误?

我想在Xcode中debugging我的PhoneGap应用程序,但是它的控制台无法显示javascript错误。

在Cordova / PhoneGap应用程序中查看和debuggingJavaScript错误的最优雅方式是将Web Inspector从Safari浏览器附加到iOS应用程序的Web视图中(但与已经提到的Tom Clarkson类似,您至less需要iOS 6 )。

  • 在iPad或iPhone上使用设置应用程序在Safari的高级设置中启用Web Inspector
  • 通过USB将设备连接到Mac(它将出现在Safari的“开发”菜单下)
  • 启动你的App
  • 浏览到您要debugging的Web视图
  • 在Mac上,从Safari Develop菜单中,从其子菜单中select设备名称和应用程序(其HTML页面)
  • Web Inspector窗口将打开,使您可以浏览DOM,设置断点等。

OS X上Safari Develop菜单的屏幕转储

苹果文档设置: https : //developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

完整的第三方教程:
http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

或者,您可以在安装debugging代理后将Chrome的Web Inspector连接到iOS设备: https : //github.com/google/ios-webkit-debug-proxy/ 。 这也打开了从Linux进行检查的能力。 使用专用的Chrome代理,可以从Windows远程访问您的iOS的HTML,CSS和JavaScript: https : //github.com/artygus/ios-webkit-debug-proxy-win32 。


每个iOS版本的最低版本的桌面Safari

对于iOS的每个版本,您都需要特定的最低版本的Desktop Safari才能使用远程Web检查,请参阅下面的列表。

iOS 6
Safari 6+
IOS 7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
未知的(Safari 8 +?9+?或者甚至可能是技术预览版?通过评论帮助赞赏。)

将下列附件粘贴到文档开始附近,以便在其他任何JavaScript之前执行。

<script type="text/javascript"> window.onerror = function(message, url, lineNumber) { console.log("Error: "+message+" in "+url+" at line "+lineNumber); } </script> 

在Xcode控制台窗口中欣赏你的Javascript错误的细节。

更新:上述技术将logging错误,如未定义的variables。 但是,语法错误(如缺less逗号)仍然会导致整个脚本中断而不logging任何内容。

因此,您应该将以下内容添加到onDeviceReady函数的开始处:

 console.log('Javascript OK'); 

如果在应用程序启动时没有在您的日志窗口中看到“JavaScript OK”,那么这意味着您在某处出现语法错误。

为了节省找不到逗号的狩猎,最简单的事情就是把你的代码粘贴到一个Javascriptvalidation器中,比如这个:

http://www.javascriptlint.com/online_lint.php

并让它find你的错误。

希望这会消除一些debugging的痛苦。

请注意,对于0.9.2(今天发布),console.log已在所有平台上进行了日志logging(不再使用debug.log)。

有一个在桌面WebView上的function是没有公开在iOS UIWebView,将捕获所有的错误(我试图将该function插入到使用私有API的插件,但插件只会用于开发),但现在做什么Krisbuild议上面,并把代码尝试catch块,并使用console.log

为了快速捕捉可能的语法错误,在开发时,我已经在桌面Safari中加载页面,并快速刷新Webkit错误控制台可见。

debug.log会将消息发送到Phonegap中的XCode控制台(允许您loggingexception的结果或进行一些debugging),但是您必须在Safari中debugging其他javascript错误(无论是在桌面上还是在桌面上)在启用了debugging控制台的iPhone上)。 我还没有find一个Javascript错误,这是由iPhone上运行造成的,并没有出现在debugging时在Safari中打开控制台(虽然我知道iPhone和WebView和Safari之间有一些差异)。

我刚刚遇见了Weinre

这是一个远程的JavaScriptdebugging器phonegap。 您可以设置您自己的Weinre服务器,也可以使用http://debug.phonegap.com/上的服务器;

它似乎工作得很好 – 至今印象非常深刻。

如果你使用的是iOS 6,你可以简单地将Safari浏览器(在桌面Safari的开发菜单上)附加到你的应用程序,并获得完整的JavaScriptdebugging。

有一些地方有一些限制 – 启动错误和插件调用 – 但它对于其他任何事情都很好。

为了在Xcode中进行javascriptdebugging工作,我会看看下面的内容。

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

至于额外的故障排除去…
开始你可以在你的电脑上运行Safari浏览器的应用程序,并利用safari的debugging器(或铬,因为两者都运行类似的渲染引擎)。 这不会打击先进的逻辑错误和你的许多API问题,但它至less应该帮助解决许多问题(基本的JavaScript,HTML5等….)。

要查看所有在JavaScript控制台中的错误,我同意使用这个事件监听器

 <script type="text/javascript"> window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );}; var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error </script> 

但是,除非安装了cordova插件,否则不会在XCode“控制台”上显示。 转到您的项目文件夹,然后input:

 ? cordova plugin add cordova-plugin-console 

这将允许javascript命令“console.log('some string')在XCode上显示。

注意你将需要git等等,但是如果你正在编译xcode中的phonegap项目,你最有可能拥有它!

PS请确保在使用console.log之前,先将cordova.js脚本插件放入

 <script type="text/javascript" src="/cordova.js"></script> 

把这个放在index.html的开头

 <script type="text/javascript"> window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);}; var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error </script> 

这是一个简单的方法,为我工作:

  • cd到terminal中包含index.html文件的目录
  • 通过调用(我使用python 2.7)使用python启动一个http服务器:

    python -m SimpleHTTPServer

  • 通过在浏览器中inputHTTPServer的地址来在Safari浏览器中查看页面,对于我来说URL是:

     http://0.0.0.0:8000/ 
  • 打开开发者工具:

    在铬这是alt +命令+我。 查看控制台选项卡,可能需要刷新页面。

    在Safari中:Safari – >首选项 – >高级 – >选中“显示开发菜单”。 开发菜单 – >显示错误控制台(或alt + command + c)。 刷新页面。 按CTRL + 5打开问题标签。