I decided to blog the process I have personally found productive when developing mobile apps for PhoneGap and iOS in case it might help others. Below I cover the overall steps I take followed by a short video showing the process in use. This is only one of many possible workflows but if you’re looking for a fast track to getting started then this should be useful.
Note: This workflow assumes you’re developing on a Mac 🙂
Create a PhoneGap project for iOS using the PhoneGap command line tools. For example, from within your phonegap-2.7.0/lib/ios/bin folder (or anywhere if set on your PATH) and run the create script with your desired project and app name:
./create ~/MyPhoneGapProject com.sample.phonegapapp MyApp
The project created includes a sample PhoneGap application already configured, so you can run the index.html immediately if desired. See the index.js file for the sample application code to handle the deviceReady event which is needed before displaying your content.
Open your newly created project in your favorite IDE (I happen to use WebStorm from JetBrains currently), then double click the .xcodeproject file that was created in your project to bring it up in XCode as well from within the same folder. I keep both IDE’s open and do all of my coding in WebStorm since it has good formatting, code hinting and other features I personally prefer, and only flip over to XCode when I need to actually run the app on my device or the simulator for testing.
When ready to debug, open Safari and use the Developer Tools – Web Inspector to remote debug directly on your phone or iOS simulator from the browser. Note that you’ll first have to make sure you’ve enabled the feature and set the Develop menu to be visible in Safari. My colleague Ray Camden wrote up an informative post on this process, check it out for more details!
Below is a short video showing this process in action…