Voor het ontwikkelen van mobile-first web apps wil je graag de app native op je toestel debuggen zodat je functionaliteit goed kunt testen. Echter het probleem is dat de debug informatie van je mobiele browser, zoals console.log en de source view, niet standaard is uit te lezen. Dit in tegenstelling tot je desktop browser. Voor IOS en Android is dit mogelijk. In deze serie zal ik eerst de manier beschrijven hoe je  jouw Android toestel debugbaar kunt maken. In het eerste deel zal ik beschrijven hoe je de ontwikkelaarsopties op je android toestel zichtbaar kunt maken. In het volgende artikel zal ik ingaan op hoe je de Chrome browser kunt gebruiken om de debug informatie toch uit te lezen.

Benodigdheden

Eigenlijk heel simpel:

• Een android toestel.
• Een pc met een Chrome Browser.

Stappen om je android toestel geschikt te maken voor debugging

De ontwikkelaarsopties in Android zijn standaard niet zichtbaar. Om ze wel te tonen dien je een klein trucje uit te halen. Ga naar je instellingen scherm op je toestel en open de menu-optie “over telefoon/tablet”.

Tik nu 7 keer achter elkaar op het build-nummer.

Na een keer of 4/5 krijg je plotseling een ontwikkelaars melding. Klik je nog een paar keer en dan is de telefoon/tablet geschikt voor ontwikkelaar. In de instellingen hoofdmenu staat nu een extra menu-optie “Opties voor ontwikkelaars”.

Klik je daarop dan kun je de opties aan- en uitzetten. Belangrijk is om de algemene optie “aan” te zetten en de optie voor “USB-fout opsporing”.

Gefeliciteerd je toestel is nu geschikt om je web app te kunnen debuggen!

In het tweede deel van deze serie zal ik beschrijven hoe je de Chrome browser van je pc dient te configureren zodat je ook de javascript meldingen en console log informatie kunt uitlezen.