Blog

Mobiel debugging web apps deel 2 : chrome setup

Dus nadat je een android device geconfigureerd hebt voor het ontwikkelen van web apps (zie mobiel debugging deel 1), wil je graag de debug informatie uitlezen zoals je normaal ook doet bij het ontwikkelen van websites. In dit artikel kun je lezen hoe je moet instellen. Alles wat je hiervoor nodig hebt is de chrome webbrowser en een usb-kabeltje.

Stap 1: Device aansluiten via USB

Zorg dat je op je mobiele device de ontwikkelaarsoptie “USB Foutenopsporing” hebt geactiveerd. Hoe je dit doet zie mobiel debugging deel 1

Stap 2: De chrome webbrowser configureren

Op je ontwikkel pc start je nu de chrome browser op en open de developer tools (<CTRL> <SHIFT> i). Ga vervolgens naar de instellingen (rechts boven ), selecteer de optie “more tools” en dan de optie “inspect devices”.chrome-browser-device-inspecting

Vink de optie “Discover USB Devices” aan. Indien je ontwikkel website lokaal draait dan dien je ook de optie “port forwarding” aan te vinken en de poorten waarop de webserver draait als regel toe te voegen. chrome-browser-device-settings

 

Stap 3: remote debugging

Zorg dat je Chrome op je Android device hebt geopend ensluit het device aan via een USB kabel op je ontwikkel pc. Als het device nu is aangesloten kun je hem linksboven zien in de lijst op je ontwikkel pc. Mocht dit niet zo zijn, vaak lukt het wel als je de kabel nog eens aansluit.

chrome-browser-device-connected

Klik op het device in het settings scherm en je krijgt de tabs te zien die op je chrome browser van je mobiele device actief zijn. Je kunt ze nu via hier bedienen door op de “inspect” knop te drukken van de desbetreffende tab.

chrome-browser-device-inspect

Je krijgt nu een scherm met daarin je chrometab van je device op je ontwikkel pc. Daarin staat ook alle debug informatie zoals je de web app debugged op je ontwikkel pc. Je kunt nu debuggen zoals je gewend bent.

chrome-browser-device-console-logWil je nog meer achtergrond informatie over remote debugging op mobiel devices? Op https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging vindt je hier meer informatie over.

 

 

Gerelateerde artikelen