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

2,949
views

Published on

Mobile applications Development - Lecture 9 …

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,949
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
99
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LAB PhoneGapDevelopment & 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 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 Chrome.app --args “ --disable-web-security“Windows chrome.exe --disable-web-security DO IT ONLY FOR DEBUGGING!!!
  • 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. 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 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 - 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 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 Architecturehttp://bit.ly/IK9kvC
  • 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 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

×