Phonegap Development & Debugging

3,461 views

Published on

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

Published in: Education, Technology

Phonegap Development & Debugging

  1. 1. LAB PhoneGapDevelopment & Debugging Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
  2. 2. Roadmap• My Development Environment• Debugging PhoneGap Apps
  3. 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. 4. Roadmap• My Development Environment• Debugging PhoneGap Apps
  5. 5. My testing/debugging process1. Code & test in the Desktop browser – This works for functionalities not relying on PhoneGap – You may use PhoneGap shimmers here2. Run in the simulator & test in the Desktop browser – Very handy & accurate3. Run on the device & debug in the Desktop browser – Complete control & confidence
  6. 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. 7. Chrome Security RestrictionIf 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 accessOSX open -a Google Chrome.app --args “ --disable-web-security“Windows chrome.exe --disable-web-security DO IT ONLY FOR DEBUGGING!!!
  8. 8. Desktop Browser - ToolsPhoneGap Shims – PhoneGap-Desktop https://github.com/jxp/phonegap-desktop/wiki – stopgap https://github.com/alunny/stopgap – pgDebug https://gist.github.com/476358Browser’s extension for window dimensions – Window Resizer https://chrome.google.com/webstore/detail/kkelicaakdanhinj deammmilcgefonfh
  9. 9. PhoneGap Desktop1. Choose a webkit browser2. Copy debugdata.json into the root www folder of your app’s project3. Use phonegap-desktop.js in place of the standard phonegap library4. modify debugdata.json to your specific needs
  10. 10. Desktop Browser - ToolsRipple http://ripple.tinyhippos.com/
  11. 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. 12. Simulator - ToolsiWebInspector http://www.iwebinspector.comIt is based on an hidden debugging feature from Apple
  13. 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. 14. onDevice - ToolsWeinre 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. 15. Weinre Architecturehttp://bit.ly/IK9kvC
  16. 16. Reference Table PG- PG-Desktop Ripple iWebInspector Weinre The Craftsman way iOSAndroid craftsman way console.log() + alert() way:
  17. 17. Bonusif you are developing web apps on multiple devices you can use Adobe Shadow http://labs.adobe.com/technologies/shadow/
  18. 18. Adobe Shadow
  19. 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

×