how to emulate a mobile (android) browser on desktop

Question

I'm trying to debug a problem that only occurs when I access a mobile website from a mobile browser. I strongly suspect that the root cause of the problem is due to caching that occurs when you access the same page several times.

I can reproduce the problem consistently when I access the page from my Android phone, but if I use a desktop browser the problem never occurs.

Because I can't use any developer tools on my Android phone, I really need to reproduce the problem from a desktop browser, so that I've some way of debugging into it. I've already tried using both Firefox and Chrome with an appropriate setting of the User-Agent header (so that the mobile version of the site is displayed), but that doesn't work.

Is there a better way to emulate the behaviour of a mobile browser from the desktop, in a manner that allows the client-side code can be debugged? FWIW, I'm fairly confident that I could also reproduce the problem on an iPhone, but don't have one available.

Answer 1

You can use a debugger on your phone, using chrome debugger.

Nowadays, you can just navigate to chrome://inspect/#devices after plugging your device in.

If that doesn't work, you can use the old method:

1. Connect your mobile device to the host using a USB cable
2. On the mobile device, launch Chrome. Open Settings > Advanced > Developer tools and check the Enable USB Web debugging option
3. Issue the following command in the console on your host machine to enable port forwarding:
   adb forward tcp:9222 localabstract:chrome_devtools_remote
4. Open desktop Chrome and navigate to localhost:9222
5. Choose the page you need to debug
6. You can now start debugging and profiling mobile content in the Developer Tools on your desktop