Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

On-Device Debugging With PhoneGap & iOS 6

DZone's Guide to

On-Device Debugging With PhoneGap & iOS 6

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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!



Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Andrew Trice, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}