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

【问题标题】：How to see the javascript errors of PhoneGap app in Xcode?如何在 Xcode 中查看 PhoneGap 应用程序的 javascript 错误？
【发布时间】：2011-04-30 15:29:43
【问题描述】：

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

【问题讨论】：

标签： javascript ios xcode debugging cordova

【解决方案1】：

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

在 iPad 或 iPhone 上，使用设置应用在 Safari 的高级设置中启用 Web Inspector
通过 USB 将您的设备连接到 Mac（然后它将出现在 Safari 的“开发”菜单下）
启动您的应用程序
导航到要调试的 Web 视图
在 Mac 上，从 Safari 开发菜单中，从其子菜单中选择您的设备名称和应用程序（其 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 开发工具
Mozilla 调试器

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

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

对于每个 iOS 版本，您都需要特定的最低桌面 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+

【讨论】：

同意。使用 safari web 检查器比 Weinre 更健壮，并且比粘贴到 JS lint 工具中发现错误要快得多。它还允许您检查和操作 DOM 元素，这非常棒。我建议人们使用这种方法。
您看不到首次加载消息，因为连接需要一些时间。
生产错误怎么办？就 WebView 而言，App 永远不会崩溃，但里面的 js 会抛出错误。因此，您不会在 iTunes Connect 上收到任何崩溃报告，但用户会看到白屏。
@Mirko Web Inspector 仅用于调试，与 iTunes Connect 无关。
@Mirko 您可以使用 Cordova Crashlytics plug-in 构建您的应用程序或使用 Google Firebase。

【解决方案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

并让它为您找到错误。

希望这可以消除调试中的一些痛苦。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

这不适用于我，Phonegap 1.1.0、Xcode 4.2 beta 以及带有 iOS 4.3 的 iPhone 和带有 iOS 5.0 模拟器的 iPhone。我添加了 console.log("message");在 alert("message"); 的地方调用有效，但没有任何内容写入日志。有谁知道出了什么问题？
答案是……console.log 直到Phonegap 自身初始化后才起作用。我在 body.onload 中调用它，这还为时过早。

【解决方案4】：

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

【讨论】：

【解决方案5】：

我刚刚遇到Weinre

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

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

【讨论】：

@asgep1 两个链接现在都失效了！ :(

【解决方案6】：

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

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

【讨论】：

这是迄今为止最好的方法。它适用于插入式设备和 IOS 模拟器，并且比尝试使用 Weinre 实现相同目标更可靠。

【解决方案7】：

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

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

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

【讨论】：

【解决方案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“控制台”上。转到您的项目文件夹并输入以下内容：

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

【讨论】：

【解决方案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>

【讨论】：

问题在控制台中，而不是在视图中。

【解决方案10】：

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

cd 到终端中包含 index.html 文件的目录
通过调用使用python启动http服务器（我使用python 2.7）：

python -m SimpleHTTPServer
通过在浏览器中输入 HTTPServer 的地址在 safari 中查看页面，对我来说 URL 是：
```
http://0.0.0.0:8000/
```
打开开发者工具：

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

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

【讨论】：

这仅适用于您的应用程序是一个简单的网络应用程序。在标准浏览器中无法调用 PhoneGap/设备功能。