Your SlideShare is downloading. ×
Phonegap Development & Debugging
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Phonegap Development & Debugging


Published on

Mobile applications Development - Lecture 9 …

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

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. LAB PhoneGapDevelopment & Debugging Ivano Malavolta
  • 2. Roadmap• My Development Environment• Debugging PhoneGap Apps
  • 3. Development Environment• Sublime Text 2 –• SublimeText Package Control –• HTML Prettify –• JSHint –
  • 4. Roadmap• My Development Environment• Debugging PhoneGap Apps
  • 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. 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 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. Desktop Browser - ToolsPhoneGap Shims – PhoneGap-Desktop – stopgap – pgDebug’s extension for window dimensions – Window Resizer deammmilcgefonfh
  • 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. Desktop Browser - ToolsRipple
  • 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 - ToolsiWebInspector http://www.iwebinspector.comIt 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 - 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. Weinre Architecture
  • 16. Reference Table PG- PG-Desktop Ripple iWebInspector Weinre The Craftsman way iOSAndroid craftsman way console.log() + alert() way:
  • 17. Bonusif you are developing web apps on multiple devices you can use Adobe 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