How to see the javascript errors of PhoneGap app in Xcode?

Question

I want to debug my PhoneGap app in Xcode, but its Console can not show javascript errors.

Answer 1

Put this in the beginning of your 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 2

Note that with 0.9.2 (released today), console.log has been standardized across the platforms for logging (with debug.log deprecated).

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

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.

Answer 3

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).

Answer 4

Paste the following somewhere near the start of your document so that it gets executed before any of your other 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.

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 onDeviceReady function:

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.

To save hunting for missing commas, the easiest thing is to paste your code into a Javascript validator such as this one:

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.