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

javascript ios xcode debugging cordova
mockee picture mockee · Oct 26, 2010 · Viewed 63.9k times · Source

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

Answer

ᴠɪɴᴄᴇɴᴛ picture ᴠɪɴᴄᴇɴᴛ · Apr 4, 2013

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.

screen dump of Safari Develop menu on OS X

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+

Related questions

Loading javascript into a UIWebView from resources

I need to load javascript files from my apps resources folder. As of right now, it does read images from the resources just fine, but it's not reading javascripts for some reason. I have been able to render html docs …

Read More
Is it possible to allow Cross Site Scripting (XSS) in Mobile safari?

I am building a hybrid app (HTML,CSS, JS + Native iOS code), and Would like to make calls to a web service, but this is being blocked currently by the XSS Security. What do I need to do to turn …

Read More
Detect if device is iOS

I'm wondering if it's possible to detect whether a browser is running on iOS, similar to how you can feature detect with Modernizr (although this is obviously device detection rather than feature detection). Normally I would favour feature detection instead, …

Read More