phonegap development & debugging

LABLABPhoneGap

Development & DebuggingIvano MalavoltaIvano Malavolta

ivano.malavolta@univaq.it

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