Phonegap Development & Debugging
-
Upload
ivano-malavolta -
Category
Education
-
view
2.979 -
download
4
description
Transcript of Phonegap Development & Debugging
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