Phonegap Development & Debugging


Published on

Mobile applications Development - Lecture 9


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).

Published in: Education, Technology

Phonegap Development & Debugging

  1. 1. LAB PhoneGapDevelopment & Debugging Ivano Malavolta
  2. 2. Roadmap• My Development Environment• Debugging PhoneGap Apps
  3. 3. Development Environment• Sublime Text 2 –• SublimeText Package Control –• HTML Prettify –• JSHint –
  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 --args “ --disable-web-security“Windows chrome.exe --disable-web-security DO IT ONLY FOR DEBUGGING!!!
  8. 8. Desktop Browser - ToolsPhoneGap Shims – PhoneGap-Desktop – stopgap – pgDebug’s extension for window dimensions – Window Resizer 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
  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 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 Architecture
  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
  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