SlideShare a Scribd company logo
1 of 19
Download to read offline
LAB
       PhoneGap
Development & Debugging
            Ivano Malavolta
       ivano.malavolta@univaq.it
   http://www.di.univaq.it/malavolta
Roadmap

• My Development Environment
• Debugging PhoneGap Apps
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/
Roadmap

• My Development Environment
• Debugging PhoneGap Apps
My testing/debugging process
1. Code & test in the Desktop browser
  –    This works for functionalities not relying on
       PhoneGap
  –    You may use PhoneGap shimmers here

2. Run in the simulator & test in the Desktop
   browser
  –    Very handy & accurate

3. Run on the device & debug in the Desktop
   browser
  –    Complete control & confidence
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
Chrome Security Restriction
If 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 access

OSX
  open -a Google Chrome.app --args “
  --disable-web-security“

Windows
  chrome.exe --disable-web-security

       DO IT ONLY FOR DEBUGGING!!!
Desktop Browser - Tools
PhoneGap Shims
  – 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
  – Window Resizer
     https://chrome.google.com/webstore/detail/kkelicaakdanhinj
       deammmilcgefonfh
PhoneGap Desktop

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 debugdata.json to your specific needs
Desktop Browser - Tools

Ripple
  http://ripple.tinyhippos.com/
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
Simulator - Tools

iWebInspector
   http://www.iwebinspector.com


It is based on an hidden debugging feature from Apple
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
onDevice - Tools

Weinre
  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:
Weinre Architecture




http://bit.ly/IK9kvC
Reference Table


          PG-
          PG-Desktop   Ripple   iWebInspector   Weinre   The Craftsman way

  iOS

Android

                                  craftsman way console.log() + alert()
                                            way:
Bonus

if you are developing web apps on multiple
   devices you can use Adobe Shadow
     http://labs.adobe.com/technologies/shadow/
Adobe Shadow
.. 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

More Related Content

What's hot

Appium@Work at PAYBACK
Appium@Work at PAYBACKAppium@Work at PAYBACK
Appium@Work at PAYBACKMarcel Gehlen
 
Android UI Testing with Appium
Android UI Testing with AppiumAndroid UI Testing with Appium
Android UI Testing with AppiumLuke Maung
 
10 Golden Rules For Outstanding Titanium Apps
 10 Golden Rules For Outstanding Titanium Apps 10 Golden Rules For Outstanding Titanium Apps
10 Golden Rules For Outstanding Titanium Appsjamessugrue
 
Appium troubleshooting
Appium troubleshootingAppium troubleshooting
Appium troubleshootingadi ben aroya
 
Testing Native iOS Apps with Appium
Testing Native iOS Apps with AppiumTesting Native iOS Apps with Appium
Testing Native iOS Apps with AppiumSauce Labs
 
Future of Mobile Automation, Appium Steals it
Future of Mobile Automation, Appium Steals itFuture of Mobile Automation, Appium Steals it
Future of Mobile Automation, Appium Steals itSrinivasan Sekar
 
Using Selenium to Test Native Apps (Wait, you can do that?)
Using Selenium to Test Native Apps (Wait, you can do that?)Using Selenium to Test Native Apps (Wait, you can do that?)
Using Selenium to Test Native Apps (Wait, you can do that?)Sauce Labs
 
Appium basics
Appium basicsAppium basics
Appium basicsSyam Sasi
 
Appium Mobile Test Automation like WebDriver
Appium Mobile Test Automation like WebDriverAppium Mobile Test Automation like WebDriver
Appium Mobile Test Automation like WebDriverAndrii Dzynia
 
Espresso testing
Espresso testingEspresso testing
Espresso testingvodqancr
 
Automating with selenium2
Automating with selenium2Automating with selenium2
Automating with selenium2mindqqa
 
Tech Talk #5 : Android Automation Test with Espresso - Trần Văn Toàn
Tech Talk #5 : Android Automation Test with Espresso - Trần Văn ToànTech Talk #5 : Android Automation Test with Espresso - Trần Văn Toàn
Tech Talk #5 : Android Automation Test with Espresso - Trần Văn ToànNexus FrontierTech
 
Advanced automated visual testing with Selenium
Advanced automated visual testing with SeleniumAdvanced automated visual testing with Selenium
Advanced automated visual testing with Seleniumadamcarmi
 
Test automation using selenium
Test automation using seleniumTest automation using selenium
Test automation using seleniummindqqa
 

What's hot (20)

Appium@Work at PAYBACK
Appium@Work at PAYBACKAppium@Work at PAYBACK
Appium@Work at PAYBACK
 
Android UI Testing with Appium
Android UI Testing with AppiumAndroid UI Testing with Appium
Android UI Testing with Appium
 
10 Golden Rules For Outstanding Titanium Apps
 10 Golden Rules For Outstanding Titanium Apps 10 Golden Rules For Outstanding Titanium Apps
10 Golden Rules For Outstanding Titanium Apps
 
Appium troubleshooting
Appium troubleshootingAppium troubleshooting
Appium troubleshooting
 
Automated UI Testing Frameworks
Automated UI Testing FrameworksAutomated UI Testing Frameworks
Automated UI Testing Frameworks
 
Testing Native iOS Apps with Appium
Testing Native iOS Apps with AppiumTesting Native iOS Apps with Appium
Testing Native iOS Apps with Appium
 
Future of Mobile Automation, Appium Steals it
Future of Mobile Automation, Appium Steals itFuture of Mobile Automation, Appium Steals it
Future of Mobile Automation, Appium Steals it
 
Using Selenium to Test Native Apps (Wait, you can do that?)
Using Selenium to Test Native Apps (Wait, you can do that?)Using Selenium to Test Native Apps (Wait, you can do that?)
Using Selenium to Test Native Apps (Wait, you can do that?)
 
Appium basics
Appium basicsAppium basics
Appium basics
 
20150319 testotipsio
20150319 testotipsio20150319 testotipsio
20150319 testotipsio
 
Appium Mobile Test Automation like WebDriver
Appium Mobile Test Automation like WebDriverAppium Mobile Test Automation like WebDriver
Appium Mobile Test Automation like WebDriver
 
Espresso testing
Espresso testingEspresso testing
Espresso testing
 
Automating with selenium2
Automating with selenium2Automating with selenium2
Automating with selenium2
 
Appium & Jenkins
Appium & JenkinsAppium & Jenkins
Appium & Jenkins
 
Tech Talk #5 : Android Automation Test with Espresso - Trần Văn Toàn
Tech Talk #5 : Android Automation Test with Espresso - Trần Văn ToànTech Talk #5 : Android Automation Test with Espresso - Trần Văn Toàn
Tech Talk #5 : Android Automation Test with Espresso - Trần Văn Toàn
 
Java applet-basics
Java applet-basicsJava applet-basics
Java applet-basics
 
Advanced automated visual testing with Selenium
Advanced automated visual testing with SeleniumAdvanced automated visual testing with Selenium
Advanced automated visual testing with Selenium
 
Test automation using selenium
Test automation using seleniumTest automation using selenium
Test automation using selenium
 
applet using java
applet using javaapplet using java
applet using java
 
Java applet-basics
Java applet-basicsJava applet-basics
Java applet-basics
 

Viewers also liked

Technological Strategies & Monetization
Technological Strategies & MonetizationTechnological Strategies & Monetization
Technological Strategies & MonetizationIvano Malavolta
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI DesignIvano Malavolta
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 
Designing Mobile Experiences
Designing Mobile ExperiencesDesigning Mobile Experiences
Designing Mobile ExperiencesBrian Fling
 
Mobile Ecosystem
Mobile EcosystemMobile Ecosystem
Mobile EcosystemPragati Rai
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 
Ubiquitous Computing
Ubiquitous ComputingUbiquitous Computing
Ubiquitous Computingu065932
 

Viewers also liked (13)

Technological Strategies & Monetization
Technological Strategies & MonetizationTechnological Strategies & Monetization
Technological Strategies & Monetization
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
jQuery
jQueryjQuery
jQuery
 
UI Design
UI DesignUI Design
UI Design
 
Designing for Context
Designing for ContextDesigning for Context
Designing for Context
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI Design
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
User-Centered Design
User-Centered DesignUser-Centered Design
User-Centered Design
 
Designing Mobile Experiences
Designing Mobile ExperiencesDesigning Mobile Experiences
Designing Mobile Experiences
 
Mobile Ecosystem
Mobile EcosystemMobile Ecosystem
Mobile Ecosystem
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
 
Ubiquitous Computing
Ubiquitous ComputingUbiquitous Computing
Ubiquitous Computing
 

Similar to Phonegap Development & Debugging

Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakayaMbakaya Kwatukha
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Javaamaankhan
 
DCAST Meetup - Washington, DC Feb 2016
DCAST Meetup - Washington, DC Feb 2016DCAST Meetup - Washington, DC Feb 2016
DCAST Meetup - Washington, DC Feb 2016Justin Ison
 
Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)danielputerman
 
Appium mobile web+dev conference
Appium   mobile web+dev conferenceAppium   mobile web+dev conference
Appium mobile web+dev conferenceIsaac Murchie
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive WebdesignSven Wolfermann
 
Appium workship, Mobile Web+Dev Conference
Appium workship,  Mobile Web+Dev ConferenceAppium workship,  Mobile Web+Dev Conference
Appium workship, Mobile Web+Dev ConferenceIsaac Murchie
 
iPhone App from concept to product
iPhone App from concept to productiPhone App from concept to product
iPhone App from concept to productjoeysim
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksSasha dos Santos
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instrumentsIvano Malavolta
 
Android Platform Debugging and Development
Android Platform Debugging and DevelopmentAndroid Platform Debugging and Development
Android Platform Debugging and DevelopmentOpersys inc.
 

Similar to Phonegap Development & Debugging (20)

Phone gap development, testing, and debugging
Phone gap development, testing, and debuggingPhone gap development, testing, and debugging
Phone gap development, testing, and debugging
 
Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakaya
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Appium- part 1
Appium- part 1Appium- part 1
Appium- part 1
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Java
 
The future is hybrid
The future is hybridThe future is hybrid
The future is hybrid
 
DCAST Meetup - Washington, DC Feb 2016
DCAST Meetup - Washington, DC Feb 2016DCAST Meetup - Washington, DC Feb 2016
DCAST Meetup - Washington, DC Feb 2016
 
Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)Appium overview (Selenium Israel #2, Feb. 2014)
Appium overview (Selenium Israel #2, Feb. 2014)
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Webapi
WebapiWebapi
Webapi
 
Appium mobile web+dev conference
Appium   mobile web+dev conferenceAppium   mobile web+dev conference
Appium mobile web+dev conference
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
 
Appium workship, Mobile Web+Dev Conference
Appium workship,  Mobile Web+Dev ConferenceAppium workship,  Mobile Web+Dev Conference
Appium workship, Mobile Web+Dev Conference
 
iPhone App from concept to product
iPhone App from concept to productiPhone App from concept to product
iPhone App from concept to product
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
Android Platform Debugging and Development
Android Platform Debugging and DevelopmentAndroid Platform Debugging and Development
Android Platform Debugging and Development
 

More from Ivano Malavolta

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Ivano Malavolta
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)Ivano Malavolta
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green ITIvano Malavolta
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Ivano Malavolta
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]Ivano Malavolta
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Ivano Malavolta
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Ivano Malavolta
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Ivano Malavolta
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Ivano Malavolta
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Ivano Malavolta
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Ivano Malavolta
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Ivano Malavolta
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Ivano Malavolta
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile developmentIvano Malavolta
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architecturesIvano Malavolta
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design LanguageIvano Malavolta
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languagesIvano Malavolta
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software ArchitectureIvano Malavolta
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineeringIvano Malavolta
 

More from Ivano Malavolta (20)

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
 
The H2020 experience
The H2020 experienceThe H2020 experience
The H2020 experience
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green IT
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile development
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architectures
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languages
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering
 

Recently uploaded

Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 

Recently uploaded (20)

Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 

Phonegap Development & Debugging

  • 1. LAB PhoneGap Development & 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 process 1. Code & test in the Desktop browser – This works for functionalities not relying on PhoneGap – You may use PhoneGap shimmers here 2. Run in the simulator & test in the Desktop browser – Very handy & accurate 3. 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 Restriction If 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 access OSX open -a Google Chrome.app --args “ --disable-web-security“ Windows chrome.exe --disable-web-security DO IT ONLY FOR DEBUGGING!!!
  • 8. Desktop Browser - Tools PhoneGap Shims – 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 – Window Resizer https://chrome.google.com/webstore/detail/kkelicaakdanhinj deammmilcgefonfh
  • 9. PhoneGap Desktop 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 debugdata.json to your specific needs
  • 10. Desktop Browser - Tools Ripple 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 - Tools iWebInspector http://www.iwebinspector.com It 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 - Tools Weinre 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:
  • 16. Reference Table PG- PG-Desktop Ripple iWebInspector Weinre The Craftsman way iOS Android craftsman way console.log() + alert() way:
  • 17. Bonus if you are developing web apps on multiple devices you can use Adobe Shadow http://labs.adobe.com/technologies/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