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

  • Performance website hoog houden met behulp van SOLR

    Geschreven door: op maandag 3 december 2018

     Websites van onze klanten bevatten soms tienduizenden pagina’s. Dit zijn pagina’s die betrekking op de diensten die zij leveren en waar zij deze diensten leveren. Deze pagina’s worden gevuld me ...

    Bekijk het artikel »
  • HTML tips voor mail templates

    Geschreven door: op zaterdag 10 november 2018

    Bij het bouwen van een e-mail template binnen HTML komen er veel dingen kijken, ik leg in deze post een aantal basiselementen uit hoe je om moet gaan met de HTML van een mail template, en hoe wij daar ...

    Bekijk het artikel »
  • Documenteer je code

    Geschreven door: op zaterdag 27 oktober 2018

    Documenteren van je code is uiteraard een best practice. De code op zich mag zo beschrijvend mogelijk zijn, zodat de documentatie impliciet is, maar bijvoorbeeld een uitleg over het waarom van een bep ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg