Raymond Camden

Did you know - Safari Remote Debugging and PhoneGap

I assume - but maybe I'm wrong - that you are aware of the "Remote Debugger" feature available both for Chrome and Safari. These features give you the ability to use dev tools (Chrome Dev Tools and Safari's version) on your desktop while running a web page on your mobile device. I've only tested this with iOS and Safari so far, but it works great. Not only that, it works just fine with the simulator or a 'real' device connected via USB.

What you may not be aware of is that this also works with PhoneGap applications! To be clear, this means you can use your browser's developer tools to see console messages, view and modify the DOM, check network requests, view local and session storage, and add JavaScript breakpoints.

Just to be clear on that last point - you can use a fraking step debugger with your PhoneGap applications.

In order to use this feature you must be using iOS6, but even if you are targeting iOS5, you could easily use iOS6 in your simulator just for debugging purposes. You must first enable the feature, but once you do, just open Safari (because, seriously, you don't use it for the web, right?) and look under the "Develop" menu:

In the screen shot above, I'm referencing a PhoneGap application called "f2" (sorry for the short, simple name) on my iOS Simulator.

There is one small annoying issue with this feature. Whenever you close and restart your PhoneGap app the debug window wil close. That means any console messages you may have in the "deviceready" handler will probably be missed. The debug tool only shows messages received after you started the the debugger. If you have something going wrong in that area, you may want to move the code out into a secondary function started by a mouse click or some such.

Anyway, to make this a bit more clear (hopefully), I did a quick video demo showing the feature. If not pre-selected, I'd suggest switching to the HD version so the details are a bit crisper.

• 
  Searchtool #
  Commented on 01-21-2013 at 2:05 PM
  Thanks !
• 
  Denis #
  Commented on 04-11-2013 at 6:43 AM
  Thanks a lot!
• 
  Jo-Anne Head #
  Commented on 04-30-2013 at 11:05 AM
  Isn't it a bad idea to call debug.phonegap.com from a production website?
• 
  Raymond Camden #
  Commented on 04-30-2013 at 1:23 PM
  Where did you see someone using it in production? The answer is yes obviously. ;)
• 
  vic #
  Commented on 09-30-2013 at 9:41 AM
  yes , it is, the safari remote debugging is powerfull, I love it, here there is other tool to debug page (www.debuggap.com), in our company we use debuggap tool to debug. after all , safari remote debug functionality based on Mac computer.

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Sponsors

The Author

I'm Raymond Camden, a developer for Adobe. I write about client-side development using web standards and server-side programming with Node.js, ColdFusion, and other technologies. If you would like me to speak to your group, just drop me a line.

Search

Support this Site!

If this post was helpful to you, then please consider visiting my Amazon Wishlist or making a donation:

Subscribe