- Mac computer with Developer Tools (Xcode) installed and up to date.
- If deploying to an iOS device, an Apple Developer membership.
- PhoneGap installation and configuration for iOS.
- PhoneGap API Usage. See my PhoneGap Tutorial Series for iOS.
Where to get the Code?
To demonstrate the troubleshooting and debugging strategies outlined below, I will using the HelloPhoneGap project that I created for my PhoneGap Tutorial Series.
If you are using PhoneGap 0.9.6
You can get the entire source for my sample project “HelloPhoneGap” from github here: https://github.com/hutley/HelloPhoneGap
If you are using PhoneGap 1.0
You can get the entire source for my sample project “HelloPhoneGap1.0” from github here: https://github.com/hutley/HelloPhoneGap1.0
There are a couple of ways run JSLint:
- JSLint.com — this website allows you to cut and paste your code into a form and it will validate your code
- JSHint.com — some people may feel that JSLint.com is a little too restrictive, if you are in this camp then you could also try using JSHint.com.
JSLint can handle standalone script files as well as html files with script tags but there are a few limitations:
- All tag names must be in lower case.
- All tags that can take a close tag (such as <p></p>) must have a close tag.
- All tags are correctly nested.
- The entity < must be used for literal ‘<’.
If you use TextMate, you can make sure that your HTML code is compliant prior to running JSLint by running the “HTML Tidy” command first.
You can download Weinre from github and detailed instructions for installing and using it can be found here. The Weinre server app provides the tools to interact with client WebKit browsers. In order to make this happen you must set up and run the Weinre server and then add a script tag to each page of your web app that you wish to inspect and interact with.
Once everything is up and running, you can use the Weinre tools to check that PhoneGap has been initialized and that you are using the correct PhoneGap API with the proper parameters. You can also inspect the DOM and your CSS, dynamically make changes and see how they may impacts your mobile site in real time.
Now, just so you don’t make the same mistake that I did — don’t forget to remove the Weinre script from your pages when your are done debugging your pages. I lost hours one day when my app was suddenly hanging until I realized that I had forgotten to remove the script and my app was timing out looking for the Weinre server that no longer existed.
- https://github.com/alunny/stopgap — this snippet basically just wipes out the PhoneGap object and fires the ondeviceready event. This might be useful if you don’t rely on PhoneGap for all that much beyond display and don’t care about testing your interaction with the PhoneGap device APIs.
Overall, the shims that I found were a little lacking but there is nothing stopping you from rolling your own. With a little more manipulation, the snippet from @purplecabbage could be easily extended to provide a more robust framework to mock out PhoneGap and simulate device interactions.
That’s all for now! Stay tuned for future posts and don’t forget to check out my PhoneGap Tutorial Series!