Phonegap applicaties debuggen met behulp van Google Chrome en de Chrome Developer Tools

Geschreven door: op donderdag 23 juli 2015

Leestijd:

Het voordeel van het ontwikkelen van Phonegap applicaties is dat je werkt met HTML, CSS en Javascript. Hierdoor kun je al veel werk verzetten door te ontwikkelen in de browser op je ontwikkel omgeving. Maar je wilt altijd controleren of de applicatie je ontwikkelt wel werkt op de devices die je voor ogen hebt. In dit artikel leggen we uit hoe je Android applicaties kunt debuggen met behulp van Google Chrome en de Chrome Developer Tools

Phonegap applicaties debuggen op Android met Google Chrome

Voordat je de applicatie kunt debuggen moet je eerst op je apparaat aanzetten dat je device debuggen toestaat. Dit doe je in de ontwikkelaars instellingen op je telefoon.

Ga nu in chrome naar het volgende adres: chrome://inspect en vink aan dat je USB devices wilt ontdekken.

Chrome Developer Tools Devices

Mogelijk krijg je nu een melding op je telefoon of je debuggen wilt toestaat, accepteer deze dan.

Als alles goed is gegaan ziet dat er als volgt uit:

Chrome Developer Tools Devices Connected device

Phonegap applicaties debuggen

Om daadwerkelijk een phonegap applicatie te debuggen hoef je deze nu alleen nog maar uit te voeren op je apparaat.

Als je de applicatie draait dan krijg je dit te zien in Google Chrome:

Chrome Developer tools debug phonegap

Je kunt vervolgens op “inspect” drukken om de Chrome Inspector te openen.

Als je deze opent zie je de applicatie zoals je deze op je telefoon te zien is. Deze kun je ook direct in dat venster bedienen. Zo hoef je niet telkens je telefoon erbij te pakken om een bepaalde knop in te drukken. 

Chrome Developer Tools debug phonegap application

Je kunt deze debugger op twee manieren gebruiken. Als je het telefoon voorbeeld opent zie je hier direct welke elementen je selecteert in het elements-tab. Als je het voorbeeld uitzet dan je de geselecteerde elementen op je telefoon tevoorschijn komen. 

Live phonegap debuggen met Chrome

Het krachtige aan deze manier van debuggen is dat je alles kunt uitvoeren wat je normaal ook in de Chrome Inspector kan uitvoeren. Dit betekend dat je direct aanpassingen kan maken aan de Javascript, CSS en HTML. Hierdoor hoef je niet telkens de applicatie opnieuw te builden wat toch elke keer weer tijd kost.

In het volgende artikel zullen we behandelen hoe we het zelfde doen met mobiele applicaties die gemaakt worden voor het iOS platform van Apple.


Andere blogartikelen

  • SQL: Geclusterde en niet-geclusterde index

    Geschreven door: op zondag 30 juni 2019

    Het kan soms voorkomen dat het veel tijd kost voordat een bepaalde query resultaten teruggeeft. Dit kan liggen aan een scala aan problemen, zoals het gebruik van veel joins. Wat de query kan helpen ve ...

    Bekijk het artikel »
  • Hoe werkt OAuth 2.0

    Geschreven door: op zondag 30 juni 2019

    In de huidige samenleving is iedereen bijna altijd online, zo ook de applicaties waarvan de mensen gebruik maken. Als je jouw applicatie niet goed afschermt, kan dit allemaal veiligheidsrisico’s met z ...

    Bekijk het artikel »
  • OAuth 2.0: JWT token en claims

    Geschreven door: op zondag 30 juni 2019

    In mijn vorige blog heb ik uitgelegd hoe OAuth 2.0 ervoor kan zorgen dat derde partijen op een veilige manier gebruik kunnen maken van jouw applicatie met behulp van tokens. In deze blog gaan we wat m ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten