Everyone once in a while I’ll discover that there’s a JavaScript error that only reproduces on a specific device, usually a phone or tablet. Often, I can reproduce the issue in a desktop web browser by emulating an iPhone/Android device. But sometimes that doesn’t work, and then I’m stuck trying random things and waiting to see if the error goes away after the “fix” is deployed. This cycle can be painful and slow, so I set out to find a better way.

I’m sure there are other solutions to this problem, but here’s what I’ve found that’s worked for me so far.

At a high level, I use JS Console to remotely execute JavaScript on my phone while accessing my development environment from a device that can reproduce the issue. It’s actually pretty neat, and super useful. Here’s how it works:

Setup JS Console. Type “:listen” into its console and it’ll give you a script tag to use in your markup. Add it so it loads on the page(s) you want to debug. Setup a tunnel from your dev environment. Since I’m developing locally I needed a way to access my dev box from my test device. I use ngrok, which is free and works great for what I need. Debug. Once the script tag is in and you have a tunnel you can access your dev environment from any device. You’ll see the console output in JS Console’s web interface. You can even interact with it. Super handy!

This workflow saves me a ton of pain when debugging client-side issues that only reproduce on certain devices. I hope it’s helpful to you, as well.