Mobile applications Development - Lecture 9 LAB PhoneGap Development Environment Debugging PhoneGap Applications This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy). http://www.di.univaq.it/malavolta

1. LAB
PhoneGap
Development & Debugging
Ivano Malavolta
ivano.malavolta@univaq.it
http://www.di.univaq.it/malavolta

2. Roadmap
• My Development Environment
• Debugging PhoneGap Apps

3. Development Environment
• Sublime Text 2
– http://www.sublimetext.com
• SublimeText Package Control
– http://wbond.net/sublime_packages/package_control
• HTML Prettify
– https://github.com/victorporof/Sublime-HTMLPrettify
• JSHint
– http://www.jshint.com/

4. Roadmap
• My Development Environment
• Debugging PhoneGap Apps

5. My testing/debugging process
1. Code & test in the Desktop browser
– This works for functionalities not relying on
PhoneGap
– You may use PhoneGap shimmers here
2. Run in the simulator & test in the Desktop
browser
– Very handy & accurate
3. Run on the device & debug in the Desktop
browser
– Complete control & confidence

6. Desktop Browser
+ very quick
+ very handy functions
see Chrome’s Web Development Tools
+ direct
+ Breakpoints
- cannot test user agent metadata
agent’s
- browsers’ small differences and bugs
- cannot test all PhoneGap specific functionalities
PhoneGap’s
- you need PhoneGap shims

7. Chrome Security Restriction
If you need to test your JSON calls from a local web
app, you need to relax Chrome’s security policies with
respect to local files access and cross-domain
resources access
OSX
open -a Google Chrome.app --args “
--disable-web-security“
Windows
chrome.exe --disable-web-security
DO IT ONLY FOR DEBUGGING!!!

8. Desktop Browser - Tools
PhoneGap Shims
– PhoneGap-Desktop
https://github.com/jxp/phonegap-desktop/wiki
– stopgap
https://github.com/alunny/stopgap
– pgDebug
https://gist.github.com/476358
Browser’s extension for window dimensions
– Window Resizer
https://chrome.google.com/webstore/detail/kkelicaakdanhinj
deammmilcgefonfh

9. PhoneGap Desktop
1. Choose a webkit browser
2. Copy debugdata.json into the root www folder
of your app’s project
3. Use phonegap-desktop.js in place of the
standard phonegap library
4. modify debugdata.json to your specific needs

10. Desktop Browser - Tools
Ripple
http://ripple.tinyhippos.com/

11. Simulator
+ you use the device’s browser
device’s
+ very handy functions
+ see Chrome’s Web Development Tools
+ direct
+ breakpoints
- device’s performance is not considered
evice’s
this is iOS-specific
- performances may be biased
usually you need some kind of hook within your app
- device’s capabilities are only simulated
device’s

12. Simulator - Tools
iWebInspector
http://www.iwebinspector.com
It is based on an hidden debugging feature from Apple

13. on Device
+ accurate
+ still handy
+ accurate performance tests
+ accurate browser tests
browser’s
- You need to deploy the app to a real device
- No breakpoints

14. onDevice - Tools
Weinre
http://people.apache.org/~pmuellr/weinre/docs/latest/
3 main components:
components:
• Debug Server the HTTP server that’s used by the
Server:
Debug Client and Debug Target
• Debug Client the Web Inspector user interface
Client:
• Debug Target the (web) app you are debugging
Target:

15. Weinre Architecture
http://bit.ly/IK9kvC

16. Reference Table
PG-
PG-Desktop Ripple iWebInspector Weinre The Craftsman way
iOS
Android
craftsman way console.log() + alert()
way:

17. Bonus
if you are developing web apps on multiple
devices you can use Adobe Shadow
http://labs.adobe.com/technologies/shadow/

18. Adobe Shadow

19. .. A final consideration
… these are MY development environment and
the debugging tools I use
Consider them as a starting point
& feel free to use others