Did you know - Safari Remote Debugging and PhoneGap

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Searchtool posted on 1/22/2013 at 1:05 AM

Thanks !

Comment 2 by Denis posted on 4/11/2013 at 3:43 PM

Thanks a lot!

Comment 3 by Jo-Anne Head posted on 4/30/2013 at 8:05 PM

Isn't it a bad idea to call debug.phonegap.com from a production website?

Comment 4 by Raymond Camden posted on 4/30/2013 at 10:23 PM

Where did you see someone using it in production? The answer is yes obviously. ;)

Comment 5 by vic posted on 9/30/2013 at 6:41 PM

yes , it is, the safari remote debugging is powerfull, I love it, here there is other tool to debug page (http://www.debuggap.com), in our company we use debuggap tool to debug. after all , safari remote debug functionality based on Mac computer.