Performance Zone is brought to you in partnership with:

Andrew Trice is a MobileFirst Developer Advocate with IBM. Andrew is a product evangelist, experienced software architect, team leader, accomplished speaker, and published author who possesses more than a decade of designing and implementing rich applications for the web, desktop and mobile devices, plus public speaking, technical communication and product endorsement experience. Andrew has delivered customer solutions in the fields of application development, realtime data systems, GIS, immersive experiences, and data visualization, and has presented hundreds of times to audiences ranging from C-level management, to technical & developer groups, and to creative designers and art directors. Andrew is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

On-Device Debugging With PhoneGap & iOS 6

03.19.2013
| 4294 views |
  • submit to reddit

Want to debug your PhoneGap apps, complete with breakpoints, DOM & CSS inspection, profiling, and more?  This is all possible with the PhoneGap Emulator, which allows you to leverage Chrome’s Developer Tools inside of the desktop Chrome browser (covered in detail here).  However, did you also know that you can have a rich debugging/development experience in an app that is actually running on a device?

Since the release of iOS 6 last Summer, we’ve all had the ability to debug PhoneGap apps while they are running on external iOS devices, or inside of the iOS simulator. I’m surprised how often I hear that people are not aware of this feature. With iOS 6 you can use Safari’s developer Tools to connect to any HTML content on the device, either in the mobile Safari browser, or inside of a web view. PhoneGap apps fall into that second category, they are based upon iOS system web view.

You can check out a preview of remote debugging on iOS in the video below:

In order to take advantage of this, you’ll first have to enable the remote web inspector for Safari on iOS. Just follow the instructions for “Debugging Web Content on iOS” from Apple – be sure not to skip the “Enable Web Inspector on iOS“ section, which is hidden by default.  You have to enable this in iOS Settings in order for the desktop Safari Browser to be able to connect to any web content on the mobile device.

Once enabled, you can lever the full capabilities of Safari’s Developer Tools, including DOM & CSS inspection and modification, JavaScript breakpoints, storage, resources, exceptions, console logging, and more…

webinspector

Unfortunately, this is only available for PhoneGap on iOS devices at this time. Android enables remote debugging inside of the Chrome browser, however that isn’t enabled for PhoneGap apps *yet*.  Whenever Google enables Chrome for web views inside of apps, it’s on!



Published at DZone with permission of Andrew Trice, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)