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

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.

Answer 2

For making javascript debugging work in Xcode I would take a look at the following.

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

Answer 3

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.

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.

Answer 4

To view all errors in javascript console, I agree to use this event listener

<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 plugin add cordova-plugin-console

This will allow the javascript command 'console.log('some string') to show on XCode.

Note you will need git, etc... but if you are editing your phonegap project in xcode, you will most probably have it!

PS Make sure you put the cordova.js script plug-in before any use of console.log

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

Answer 5

I just came across 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/

It seems to work well - very impressed so far.

Answer 6

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

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

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.

Remote access to your iOS’s HTML, CSS and JavaScript has gotten even more flexible nowadays because you can install the RemoteDebug iOS WebKit Adapter on top of aforementioned Debug Proxy. Because this adapter translates the WebKit Remote Debugging Protocol to the Chrome Debugging Protocol, these (on all their supported platforms) become available as alternative debugging and inspection tools:

• Visual Studio Code
• Chrome DevTools
• Mozilla Debugger

BTW, remote debugging with the Safari Web Inspector works even in combination with the iOS Simulator.

---

Minimum version of Desktop Safari per iOS version

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