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

  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
  • De Controversie van AMP (Accelerated Mobile Pages)

    Geschreven door: op maandag 30 september 2019

    Er heerst al controversie rondom AMP (Accelerated Mobile Pages) sinds Google dit onderwerp heeft ingevoerd! In deze blog duiken we verder in deze controversie en ontdekken we of deze controversie tere ...

    Bekijk het artikel »
  • CSS attribuut font-display

    Geschreven door: op maandag 30 september 2019

    De snelheid van je website is belangrijk. Niet alleen omdat Google je website hierdoor hoger rankt maar ook omdat het gebruiksvriendelijker is voor de bezoekers. Als een website traag laadt, ben je ee ...

    Bekijk het artikel »
Bel 072 5345 888
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