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

Question

我想在Xcode中调试我的PhoneGap应用，但其控制台无法显示javascript错误。

Answer 1

在Cordova / PhoneGap应用程序中查看和调试JavaScript错误的最优雅方法是将Web Inspector从Safari浏览器附加到iOS应用程序中的Web View（但是，如同已经提到过的Tom Clarkson，您需要在至少iOS 6）。

• 在iPad或iPhone上使用“设置应用”在Safari的高级设置中启用Web Inspector
• 通过USB将设备连接到Mac（它将显示在Safari的“开发”菜单下）
• 启动您的应用
• 导航到要调试的Web视图
• 在Mac上，从Safari Develop菜单中，从子菜单中选择设备名称和应用程序（其HTML页面）
• 将打开Web Inspector窗口，使您可以浏览DOM，设置断点等。

Apples documentation on setting this up

A thorough third party tutorial

或者，您可以在安装iOS WebKit Debug Proxy后将Chrome的Web Inspector连接到iOS设备。这也开启了从Linux或Windows进行检查的能力。

现在，您对iOS的HTML，CSS和JavaScript的远程访问变得更加灵活，因为您可以在上述调试代理之上安装RemoteDebug iOS WebKit Adapter。由于此适配器将 WebKit远程调试协议转换为 Chrome调试协议，因此这些（在其所有支持的平台上）可用作备用调试和检查工具：

• Visual Studio代码
• Chrome DevTools
• Mozilla Debugger

顺便说一句，使用Safari Web Inspector进行远程调试甚至可以与iOS模拟器结合使用。

---

每个iOS版本的Desktop 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 9 + / 10 +？请评论;总是尝试Safari Technology Preview

    

iOS 11

    

Safari 11 +

    

iOS 12

    

Safari 12 +

Answer 2

将以下内容粘贴到文档开头附近，以便在任何其他JavaScript之前执行。

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

并享受在Xcode控制台窗口中查看Javascript错误的详细信息。

更新：上述技术将记录未定义变量等错误。但是语法错误（例如缺少逗号）仍会导致整个脚本在没有记录任何内容的情况下中断。

因此，您应该将以下内容添加到 onDeviceReady 函数的开头：

console.log('Javascript OK');

如果您在应用启动时未在日志窗口中看到“JavaScript OK”，则表示您在某处出现语法错误。

为了节省搜索丢失的逗号，最简单的方法是将代码粘贴到Javascript验证器中，例如：

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

让它为您找到错误。

希望这会带来一些调试的痛苦。

Answer 3

请注意，使用0.9.2（今天发布），console.log已在各个平台上标准化以进行日志记录（不推荐使用debug.log）。

桌面WebView上有一个功能可以在iOS UIWebView中公开，它将捕获所有错误（我试图将该功能破解成插件，它使用私有API，但插件只会是为了开发），但是现在做Kris上面提到的并在代码上放置try catch块并使用console.log

为了快速捕捉可能的语法错误，在开发时我已经在桌面Safari中加载了页面并使用webkit错误控制台可以快速刷新它。

Answer 4

debug.log会将消息发送到Phonegap中的XCode控制台（允许您记录异常的结果或进行一些调试），但是，你必须调试Safari中的其他javascript错误是正确的（或者是打开调试控制台的桌面或iphone）。我还没有找到一个Javascript错误，这是由于在iphone上运行引起的，并且在Safari中打开控制台进行调试时不存在（虽然我知道iphone上的WebView和Safari之间存在一些差异）。

Answer 5

为了在Xcode中进行javascript调试工作，我将看看以下内容。

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

就其他故障排除而言...... 首先，你可以在你的电脑上运行safari中的应用程序并使用safari的调试器（或者chrome都运行类似的渲染引擎）。这不会遇到高级逻辑错误和许多api问题，但它至少应该有助于解决许多问题（基本的javascript，HTML5等......）。

Answer 6

我刚遇到Weinre

这是一个用于phonegap的远程javascript调试器。您可以设置自己的Weinre服务器，也可以使用http://debug.phonegap.com/

上的服务器

它似乎运作良好 - 到目前为止印象非常深刻。

Answer 7

如果你使用的是iOS 6，你只需将safari web检查器（在桌面游戏的开发菜单上）附加到你的应用程序并获得完整的javascript调试。

有几个方面它有点受限 - 启动错误和插件调用 - 但它适用于其他任何东西。

Answer 8

要在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插件，否则它不会在XCodes“console”上显示。转到项目文件夹并键入：

? 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>

Answer 9

将它放在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>

Answer 10

这是一个对我有用的简单方法：

• cd到终端
中包含index.html文件的目录

• 通过调用（我使用python 2.7）使用python启动http服务器：

  python -m SimpleHTTPServer

• 通过在浏览器中输入HTTPServer的地址来查看safari中的页面，对我来说URL是：

  http://0.0.0.0:8000/
  

• 打开开发人员工具：

  在chrome中，这是alt + command + i。查看控制台选项卡，可能需要刷新页面。

  在Safari中：Safari - ＆gt;偏好 - ＆gt;高级 - ＆gt;选中“显示开发菜单”。开发菜单 - ＆gt;显示错误控制台（或alt + command + c）。刷新页面。按CTRL + 5打开问题选项卡。