9

How do you debug javascript in Xcode?

One thing that I can do is open the page in OS X Chrome browser, but naturally this will not work for application flow involving native code. Is there a smart Xcode trick that I am missing.

Max Desiatov
  • 5,087
  • 3
  • 48
  • 56
Chris G.
  • 23,930
  • 48
  • 177
  • 302
  • The only thing I can think of is to send logging messages from Javascript via Phonegap to the Xcode console. Other than this, I don't think there is any other way to debug Javascript on the device. – nhahtdh Jun 26 '12 at 12:13
  • Yes, console.log is your friend :-). Using Chrome is the best bet to get your JS working and then add in the native functionality – codemonkey Jun 26 '12 at 14:48
  • Apple recently added remote mobile device debugging to Safari web inspector. This is a big step forward in debugging iOS PhoneGap apps. (see my answer below) – B Robster Sep 28 '12 at 18:20

2 Answers2

16

With the release of iOS 6, Apple released remote Web Inspector for their Mobile Safari in conjunction with Mac Safari 6, and this is huge. Basically you have all the features and power of Web Inspector in regular Safari, for your mobile apps, including Phonegap apps. I've used weinre and this makes it obsolete for newer versions of iOS (but not for old versions of iOS, non-iOS devices such as android, or if you're on Windows).

Here's how it works (requires a Mac, either xCode 4.5+ running an iOS 6+ simulator or an iOS 6+ device, and Safari 6+ on your Mac):

in your ios simulator or ios device,open settings --> Safari --> Advanced --> Web Inspector --> (turn On) . (this is on by default in the simulator, but its worth checking)

In Safari, after you've started your phoneGap/cordova app and its loaded & running, access iPhone Simulator or your device from the Develop menu. You can enable Develop menu in Safari's Advanced Preferences, if its not already.

More discussion at the bottom of: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

(also, if you read about a "secret private interface" somewhere, this doesn't work anymore.)

B Robster
  • 40,605
  • 21
  • 89
  • 122
  • 1
    How can I debug the loading process? When I manage to open the inspector, the app is already loaded, so there's no chance to set break points in the loading code. Any idea? – blurrcat Jan 05 '13 at 01:59
  • 1
    @blurrcat Sorry I've been off SO for a while. What you describe is a limitation of it, and I've had this challenge before as well. For me, it seems like two things may have worked: I was able to add an alert() before my initialization code, which basically halted execution until I clicked OK. Or by adding a setTimeout(...) wrapper around my initialization function while i was debugging. Hope that helps – B Robster Jan 13 '13 at 07:34
  • Yes alert()! You are genius! – blurrcat Jan 14 '13 at 01:58
  • 1
    In case it helps anyone, I put together an AppleScript which automates the opening of the safari debugger window - you will have to edit the last line if you have changed your initialization filename and/or want to run it on your device: https://gist.github.com/dts/5771273. – Daniel Jun 13 '13 at 04:39
1

Try using weinre it is a really good tool to debug javascript applications on mobile devices.

http://people.apache.org/~pmuellr/weinre/docs/latest/

Although you will still not be able to debug the script step-by-step as it gives on desktop but gives lot more detail than xcode (~ for javascript).

dhaval
  • 7,611
  • 3
  • 29
  • 38