LAB LAB PhoneGap Development & Debugging Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta 

Roadmap • My Development Environment • My Development Environment • Debugging PhoneGap Apps 

Development Environment • Sublime Text 2 Sublime Text 2 Sublime Text 2 Sublime Text 2 – http://www.sublimetext.com – http://www.sublimetext.com • SublimeText SublimeText SublimeText SublimeText Package Package Package Package Control Control Control Control – http://wbond.net/sublime_packages/package_control • HTML HTML HTML HTML Prettify Prettify Prettify Prettify HTML HTML HTML HTML Prettify Prettify Prettify Prettify – https://github.com/victorporof/Sublime-HTMLPrettify • JSHint JSHint JSHint JSHint – http://www.jshint.com/ 

Roadmap • My Development Environment • My Development Environment • Debugging PhoneGap Apps 

My testing/debugging process 1. Code & test in the Desktop browser Desktop browser Desktop browser Desktop 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 simulator simulator simulator simulator & test in the Desktop browser – Very handy & accurate – Very handy & accurate 3. Run on the device device device device & debug in the Desktop browser – Complete control & confidence 

Desktop Browser + very quick quick quick quick + very handy handy handy handy functions + very handy handy handy handy functions see Chrome’s Web Development Tools + direct direct direct direct + Breakpoints Breakpoints Breakpoints Breakpoints - cannot test user user user user agent agent agent agent’s metadata - browsers’ small differences differences differences differences and bugs - browsers’ small differences differences differences differences and bugs - cannot test all PhoneGap PhoneGap PhoneGap PhoneGap’s specific functionalities - you need PhoneGap shims 

Chrome Security Restriction If you need to test your JSON calls from a local local local local web app, you need to relax Chrome’s security policies with respect to local files access and cross-domain app, you need to relax Chrome’s security policies with respect to local files access and cross-domain resources access OSX OSX OSX OSX open -a Google\ Chrome.app --args “ --disable-web-security“ Windows Windows Windows Windows chrome.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 – pgDebug https://gist.github.com/476358 Browser’s extension for window dimensions Browser’s extension for window dimensions – Window Resizer https://chrome.google.com/webstore/detail/kkelicaakdanhinj deammmilcgefonfh 

PhoneGap Desktop 1. Choose a webkit browser 1. 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 needs 4. modify debugdata.json to your specific needs 

Desktop Browser - Tools Ripple Ripple Ripple Ripple http://ripple.tinyhippos.com/ http://ripple.tinyhippos.com/ 

Simulator + you use the device device device device’s browser ’s browser ’s browser ’s browser + very handy handy handy handy functions + very handy handy handy handy functions + see Chrome’s Web Development Tools + d d d direct irect irect irect + breakpoints breakpoints breakpoints breakpoints - d d d device evice evice evice’s performance ’s performance ’s performance ’s performance is not considered this is iOS-specific - p p p performances erformances erformances erformances may be biased - p p p performances erformances erformances erformances may be biased usually you need some kind of hook within your app - device device device device’s ’s ’s ’s capabilities capabilities capabilities capabilities are only simulated 

Simulator - Tools iWebInspector http://www.iwebinspector.com http://www.iwebinspector.com It is based on an hidden debugging feature from Apple 

on Device + accurate accurate accurate accurate + still handy handy handy handy + still handy handy handy handy + accurate performance accurate performance accurate performance accurate performance tests + a a a accurate browser ccurate browser ccurate browser ccurate browser’s tests - You need to deploy deploy deploy deploy the app to a real device - You need to deploy deploy deploy deploy the app to a real device - No breakpoints breakpoints breakpoints breakpoints 

onDevice - Tools Weinre Weinre Weinre Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/ 3 3 3 3 main main main main components components components components: : : : • Debug Debug Debug Debug Server Server Server Server: the HTTP server that’s used by the Debug Client and Debug Target Debug Client and Debug Target • Debug Debug Debug Debug Client Client Client Client: the Web Inspector user interface • Debug Debug Debug Debug Target Target Target Target: the (web) app you are debugging 

Weinre Architecture http://bit.ly/IK9kvC 

Reference Table PG PG PG PG- - - -Desktop Desktop Desktop Desktop Ripple Ripple Ripple Ripple iWebInspector iWebInspector iWebInspector iWebInspector Weinre Weinre Weinre Weinre The The The The Craftsman Craftsman Craftsman Craftsman way way way way iOS iOS iOS iOS Android Android Android Android craftsman craftsman craftsman craftsman way way way way: console.log() + alert() craftsman craftsman craftsman craftsman way way way way: console.log() + alert() 

Bonus if you are developing web apps on multiple devices you can use Adobe Adobe Adobe Adobe Shadow Shadow Shadow Shadow devices you can use Adobe Adobe Adobe Adobe Shadow Shadow Shadow Shadow http://labs.adobe.com/technologies/shadow/ 

Adobe Shadow 

.. A final consideration … these are MY MY MY MY development environment and the debugging tools I I I I use the debugging tools I I I I use Consider them as a starting point & feel free to use others