Upload
ivano-malavolta
View
2.977
Download
4
Embed Size (px)
DESCRIPTION
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
Citation preview
LABLABPhoneGap
Development & DebuggingIvano MalavoltaIvano Malavolta
http://www.di.univaq.it/malavolta
Roadmap
• My Development Environment• My Development Environment
• Debugging PhoneGap Apps
Development Environment
• Sublime Text 2Sublime Text 2Sublime Text 2Sublime Text 2– http://www.sublimetext.com– http://www.sublimetext.com
• SublimeTextSublimeTextSublimeTextSublimeText Package Package Package Package ControlControlControlControl– http://wbond.net/sublime_packages/package_control
• HTML HTML HTML HTML PrettifyPrettifyPrettifyPrettifyHTML HTML HTML HTML PrettifyPrettifyPrettifyPrettify– https://github.com/victorporof/Sublime-HTMLPrettify
• JSHintJSHintJSHintJSHint– http://www.jshint.com/
Roadmap
• My Development Environment• My Development Environment
• Debugging PhoneGap Apps
My testing/debugging process
1. Code & test in the Desktop browserDesktop browserDesktop browserDesktop browser– This works for functionalities not relying on – This works for functionalities not relying on
PhoneGap– You may use PhoneGap shimmers here
2. Run in the simulatorsimulatorsimulatorsimulator & test in the Desktop browser
– Very handy & accurate– Very handy & accurate
3. Run on the devicedevicedevicedevice & debug in the Desktop browser
– Complete control & confidence
Desktop Browser
+ very quickquickquickquick+ very handyhandyhandyhandy functions+ very handyhandyhandyhandy functions
see Chrome’s Web Development Tools+ directdirectdirectdirect+ BreakpointsBreakpointsBreakpointsBreakpoints
- cannot test useruseruseruser agentagentagentagent’s metadata- browsers’ small differencesdifferencesdifferencesdifferences and bugs- browsers’ small differencesdifferencesdifferencesdifferences and bugs- cannot test all PhoneGapPhoneGapPhoneGapPhoneGap’s specific functionalities
- you need PhoneGap shims
Chrome Security Restriction
If you need to test your JSON calls from a locallocallocallocal web app, you need to relax Chrome’s security policies withrespect to local files access and cross-domain app, you need to relax Chrome’s security policies withrespect to local files access and cross-domain resources access
OSXOSXOSXOSXopen -a Google\ Chrome.app --args “
--disable-web-security“
WindowsWindowsWindowsWindowschrome.exe --disable-web-security
DO IT ONLY FOR DEBUGGING!!!
Desktop Browser - Tools
PhoneGap Shims– PhoneGap-Desktop– PhoneGap-Desktop
https://github.com/jxp/phonegap-desktop/wiki
– stopgap https://github.com/alunny/stopgap
– pgDebughttps://gist.github.com/476358
Browser’s extension for window dimensionsBrowser’s extension for window dimensions– Window Resizer
https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh
PhoneGap Desktop
1. Choose a webkit browser1. 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 to your specific needs4. modify debugdata.json to your specific needs
Desktop Browser - Tools
RippleRippleRippleRipplehttp://ripple.tinyhippos.com/http://ripple.tinyhippos.com/
Simulator
+ you use the devicedevicedevicedevice’s browser’s browser’s browser’s browser+ very handyhandyhandyhandy functions+ very handyhandyhandyhandy functions
+ see Chrome’s Web Development Tools+ ddddirectirectirectirect+ breakpointsbreakpointsbreakpointsbreakpoints
- ddddeviceeviceeviceevice’s performance ’s performance ’s performance ’s performance is not consideredthis is iOS-specific
- pppperformanceserformanceserformanceserformances may be biased- pppperformanceserformanceserformanceserformances may be biasedusually you need some kind of hook within your app
- devicedevicedevicedevice’s ’s ’s ’s capabilitiescapabilitiescapabilitiescapabilities are only simulated
Simulator - Tools
iWebInspectorhttp://www.iwebinspector.comhttp://www.iwebinspector.com
It is based on an hidden debugging feature from Apple
on Device
+ accurateaccurateaccurateaccurate+ still handyhandyhandyhandy+ still handyhandyhandyhandy+ accurate performance accurate performance accurate performance accurate performance tests+ aaaaccurate browserccurate browserccurate browserccurate browser’s tests
- You need to deploydeploydeploydeploy the app to a real device- You need to deploydeploydeploydeploy the app to a real device- No breakpointsbreakpointsbreakpointsbreakpoints
onDevice - Tools
WeinreWeinreWeinreWeinre
http://people.apache.org/~pmuellr/weinre/docs/latest/
3 3 3 3 mainmainmainmain componentscomponentscomponentscomponents: : : :
• DebugDebugDebugDebug ServerServerServerServer: the HTTP server that’s used by the Debug Client and Debug TargetDebug Client and Debug Target
• DebugDebugDebugDebug ClientClientClientClient: the Web Inspector user interface
• DebugDebugDebugDebug TargetTargetTargetTarget: the (web) app you are debugging
Weinre Architecture
http://bit.ly/IK9kvC
Reference Table
PGPGPGPG----DesktopDesktopDesktopDesktop RippleRippleRippleRipple iWebInspectoriWebInspectoriWebInspectoriWebInspector WeinreWeinreWeinreWeinre The The The The CraftsmanCraftsmanCraftsmanCraftsman waywaywayway
iOSiOSiOSiOS
AndroidAndroidAndroidAndroid
craftsmancraftsmancraftsmancraftsman waywaywayway: console.log() + alert()craftsmancraftsmancraftsmancraftsman waywaywayway: console.log() + alert()
Bonus
if you are developing web apps on multiple devices you can use Adobe Adobe Adobe Adobe ShadowShadowShadowShadowdevices you can use Adobe Adobe Adobe Adobe ShadowShadowShadowShadow
http://labs.adobe.com/technologies/shadow/
Adobe Shadow
.. A final consideration
… these are MYMYMYMY development environment and the debugging tools IIII usethe debugging tools IIII use
Consider them as a starting point
& feel free to use others