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.


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
allrig.jpg
aliancys.jpg
eriks.jpg
heinen_en_hopman.jpg
handicare_stairlifts.jpg
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail