如何在 Xcode 中查看 PhoneGap 应用程序的 javascript 错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4022152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to see the javascript errors of PhoneGap app in Xcode?
提问by mockee
I want to debug my PhoneGap app in Xcode, but its Console can not show javascript errors.
我想在 Xcode 中调试我的 PhoneGap 应用程序，但它的控制台无法显示 javascript 错误。
回答by ???????
The most elegant way to view and debug JavaScript errors in your Cordova/PhoneGap App is by attaching the Web Inspector from your Safari browser to the Web View in your iOS App (but, like Tom Clarkson already mentioned, you will need at least iOS 6).
在 Cordova/PhoneGap 应用程序中查看和调试 JavaScript 错误的最优雅方法是将 Safari 浏览器中的 Web Inspector 附加到 iOS 应用程序中的 Web 视图（但是，就像 Tom Clarkson 已经提到的，您至少需要 iOS 6 ）。
- On your iPad or iPhone use the Settings App to enable Web Inspector in the Advanced Settings for Safari
- Connect your device to a Mac via USB (it will then appear under the Develop menu of Safari)
- Start your App
- Navigate to the Web View you want to debug
- On the Mac, from the Safari Develop menu, select the name of your device and the App (its HTML-page), from its sub menu
- A Web Inspector window will open, enabling you to browse the DOM, set breakpoints etc.
- 在 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
Alternatively you could connect Chrome's Web Inspector to iOS devices after installing iOS WebKit Debug Proxy. This also opens up the ability to do the inspection from Linux or Windows.
或者，您可以在安装iOS WebKit Debug Proxy后将 Chrome 的 Web Inspector 连接到 iOS 设备。这也开启了从 Linux 或 Windows 进行检查的能力。
Remote access to your iOS's HTML, CSS and JavaScript has gotten even more flexible nowadays because you can install the RemoteDebug iOS WebKit Adapteron top of aforementioned Debug Proxy. Because this adapter translates the WebKit Remote Debugging Protocolto the Chrome Debugging Protocol, these (on all their supported platforms) become available as alternative debugging and inspection tools:
如今，远程访问 iOS 的 HTML、CSS 和 JavaScript 变得更加灵活，因为您可以在上述调试代理之上安装RemoteDebug iOS WebKit 适配器。由于此适配器将WebKit 远程调试协议转换为Chrome 调试协议，因此这些（在其所有支持的平台上）可用作替代调试和检查工具：
- Visual Studio Code
- Chrome DevTools
- Mozilla Debugger
- 视觉工作室代码
- Chrome 开发者工具
- Mozilla 调试器
BTW, remote debugging with the Safari Web Inspector works even in combination with the iOS Simulator.
顺便说一句，使用 Safari Web Inspector 进行远程调试甚至可以与 iOS 模拟器结合使用。
Minimum version of Desktop Safari per iOS version
每个 iOS 版本的桌面 Safari 的最低版本
For each version of iOS you will need a specific minimum version of Desktop Safari in order to use remote web inspection, see the list below.
对于每个版本的 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+? Please comment; always try Safari Technology Preview
- iOS 11
- Safari 11+
- iOS 12
- Safari 12+
- iOS 6
- 野生动物园 6+
- IOS 7
- Safari 6.1+
- iOS 8
- Safari 7.1+
- iOS 9
- 野生动物园 8+
- iOS 10
- Safari 9+/10+？请给出意见; 总是尝试Safari 技术预览
- iOS 11
- Safari 11+
- iOS 12
- Safari 12+
回答by elMarquis
Paste the following somewhere near the start of your document so that it gets executed before any of your other JavaScript.
将以下内容粘贴到文档开头附近的某个位置，以便它在任何其他 JavaScript 之前执行。
<script type="text/javascript">
window.onerror = function(message, url, lineNumber) {
console.log("Error: "+message+" in "+url+" at line "+lineNumber);
}
</script>
And enjoy viewing details of your Javascript errors in the Xcode console window.
并享受在 Xcode 控制台窗口中查看 Javascript 错误的详细信息。
UPDATE: The above technique will log errors such as undefined variables. But syntax errors such as missing commas will still cause the entire script to break without logging anything.
更新：上述技术将记录错误，例如未定义的变量。但是缺少逗号等语法错误仍然会导致整个脚本中断而不记录任何内容。
Therefore you should add the following to the start of your onDeviceReadyfunction:
因此，您应该将以下内容添加到onDeviceReady函数的开头：
console.log('Javascript OK');
If you don't see "JavaScript OK" appearing in your log window when the app launches, then it means you have a syntax error somewhere.
如果您在应用程序启动时没有看到“JavaScript OK”出现在您的日志窗口中，那么这意味着您在某处出现了语法错误。
To save hunting for missing commas, the easiest thing is to paste your code into a Javascript validator such as this one:
为了避免寻找丢失的逗号，最简单的方法是将您的代码粘贴到 Javascript 验证器中，例如：
http://www.javascriptlint.com/online_lint.php
http://www.javascriptlint.com/online_lint.php
and let it find the error for you.
并让它为您找到错误。
Hopefully that takes some of the pain out of debugging.
希望这可以减轻调试的痛苦。
回答by Shazron
Note that with 0.9.2 (released today), console.log has been standardized across the platforms for logging (with debug.log deprecated).
请注意，在 0.9.2（今天发布）中，console.log 已跨平台标准化以进行日志记录（debug.log 已弃用）。
There is a function that is available on the desktop WebView that is not exposed in the iOS UIWebView that will catch all errors (I'm trying to hack that functionality into a plugin, which uses private APIs, but the plugin would only be for development), but for now do what Kris suggested above and put try catch blocks on code and use console.log
有一个在桌面 WebView 上可用的功能，该功能未在 iOS UIWebView 中公开，该功能将捕获所有错误（我试图将该功能破解为使用私有 API 的插件，但该插件仅用于开发)，但现在按照 Kris 上面的建议进行操作，并在代码上放置 try catch 块并使用 console.log
To quickly catch possible syntax errors, when developing I have the page loaded in desktop Safari and quickly refresh it with the webkit error console viewable.
为了快速捕获可能的语法错误，在开发时我将页面加载到桌面 Safari 中，并使用可查看的 webkit 错误控制台快速刷新它。
回答by Terrance
For making javascript debugging work in Xcode I would take a look at the following.
为了在 Xcode 中进行 javascript 调试，我将查看以下内容。
http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/
http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/
As as far as additional troubleshooting goes...
To start with you could run the app in safari on you pc and utilize safari's debugger (or chrome as both are running similar rendering engines). This won't hit on the advanced logic errors and many of your api issues but it at the very least should help with troubleshooting many issues (basic javascript, HTML5 etc....).
至于其他故障排除...
首先，您可以在 safari 中在您的 PC 上运行该应用程序并利用 safari 的调试器（或 chrome，因为两者都运行类似的渲染引擎）。这不会影响高级逻辑错误和您的许多 api 问题，但它至少应该有助于解决许多问题（基本的 javascript、HTML5 等......）。
回答by asgeo1
I just came across Weinre
我刚遇到Weinre
It's a remote javascript debugger for phonegap. You can either setup your own Weinre server, or use the one at http://debug.phonegap.com/
它是一个用于 phonegap 的远程 javascript 调试器。您可以设置自己的 Weinre 服务器，也可以使用http://debug.phonegap.com/ 上的服务器
It seems to work well - very impressed so far.
它似乎运作良好 - 到目前为止印象非常深刻。
回答by Tom Clarkson
If you use iOS 6, you can simply attach the safari web inspector (on the develop menu of desktop safari) to your app and get full javascript debugging.
如果您使用 iOS 6，您可以简单地将 safari web 检查器（在桌面 safari 的开发菜单上）附加到您的应用程序并获得完整的 javascript 调试。
There are a couple of areas where it is a bit limited - startup errors and plugin calls - but it works well for pretty much anything else.
有几个方面它有点受限——启动错误和插件调用——但它几乎适用于其他任何事情。
回答by Kris Erickson
debug.log will send messages to the XCode console in Phonegap (allowing you to either log the result of an exception or do some debugging), however, you are correct that you have to debug other javascript errors in Safari (either on the desktop or on the iphone with Debug Console turned on). I have yet to find a Javascript error, that was caused by running on the iphone and wasn't present when debugging with the console turned on in Safari (though I know there are a few differences between the WebView and Safari on the iphone).
debug.log 会将消息发送到 Phonegap 中的 XCode 控制台（允许您记录异常结果或进行一些调试），但是，您必须在 Safari 中调试其他 javascript 错误（在桌面或在打开调试控制台的 iphone 上）。我还没有发现 Javascript 错误，这是由在 iphone 上运行引起的，并且在 Safari 中打开控制台进行调试时不存在（尽管我知道 iphone 上的 WebView 和 Safari 之间存在一些差异）。
回答by Arvin Amir
To view all errors in javascript console, I agree to use this event listener
要查看 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>
However, unless you have the cordova plugin installed, it wont show on XCodes "console". Go to your project folder and type this:
但是，除非您安装了cordova 插件，否则它不会显示在XCodes“控制台”上。转到您的项目文件夹并键入以下内容：
? cordova plugin add cordova-plugin-console
This will allow the javascript command 'console.log('some string') to show on XCode.
这将允许 javascript 命令 'console.log('some string') 在 XCode 上显示。
Note you will need git, etc... but if you are editing your phonegap project in xcode, you will most probably have it!
请注意，您将需要 git 等……但是如果您在 xcode 中编辑您的 phonegap 项目，您很可能会拥有它！
PS Make sure you put the cordova.js script plug-in before any use of console.log
PS 在任何使用console.log 之前确保你把cordova.js 脚本插件
<script type="text/javascript" src="/cordova.js"></script>
回答by Toolkit
Put this in the beginning of your index.html
把它放在你的 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>
回答by storm_m2138
Here's a simple way that worked for me:
这是一个对我有用的简单方法：
- cd to the directory containing your index.html file in the terminal
Start a http server using python by invoking (I used python 2.7):
python -m SimpleHTTPServer
View the page in safari by entering the address of the HTTPServer in a browser, for me the URL was:
http://0.0.0.0:8000/Open developer tools:
In chrome this is alt+command+i. View the console tab, may need to refresh the page.
In Safari: Safari --> Preferences --> Advanced --> check "Show Develop Menu". Develop menu --> Show error console (or alt+command+c). Refresh the page. Hitting CTRL+5 opens the issues tab.
- 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 --> 首选项 --> 高级 --> 选中“显示开发菜单”。开发菜单 --> 显示错误控制台（或 alt+command+c）。刷新页面。按 CTRL+5 打开问题选项卡。
