Tips Webontwikkeling

Mobiele website debuggen

Vandaag op het werk kreeg ik het verzoek om een fout op te lossen in de mobiele versie van de website. Op de desktop versie van de website was het probleem niet aan de orde. De vraag die vervolgens oprees was. Hoe debug je een website op je mobiel? Het korte antwoord is niet. Na even te hebben gestoeid kwam ik erachter om via Google Chrome de mobiele versie te benaderen was door de User Agent aan te passen. Hierop was het probleem snel gevonden en kon ik het verhelpen.

Om een mobiele website te debuggen op een Android telefoon of tablet via de desktop kun je Google Chrome gebruiken. Open de Developers Tools en klik op het tandwieltje rechtsonder in het venster. Een overlay komt te voorschijn met hierin verschillende configuratie opties om te debuggen. Kies voor de optie Override en pas de User Agent aan naar Chrome – Android Mobile. Zorg ervoor dan de optie Enable en User Agent zijn ingeschakeld. Enige wat nog rest is de pagina vernieuwen en dan komt de mobiele versie van de website te voorschijn.

Google Chrome Webdeveloper Tools

Het aanpassen van de User Agent in de browser is natuurlijk niet alleen makkelijk voor het oplossen van een javascript fout in de website, maar je kan je website ook makkelijk testen of deze geschikt is voor Android zonder een telefoon bij de hand te moeten hebben.