Debugging your app on a phone remotely

Using google's developer tools, you can debug all sorts of things on your application. You can run performance analysis using lighthouse, you can debug network traffic and see the console output etc.

However if you have problems with your application on the phone, you can't. We ourselves had a specific problem only on some mobile devices, that the web app just wouldn't load. It worked fine on desktop or laptop browser, but not on the phone.

So we wanted to examine what this weird problem was. Fortunately chrome has this remote debugging tool, which can help you do exactly that. You connect your phone to the laptop and have access to the same developer tools and analytics as you would on the laptop.

Here is how to set it up:

- enable 'developer tools' on your phone. This should give you access to USB debugging option in your settings

- go to chrome developer tools on your laptop and choose 'more tools' -> 'remote devices'

- connect your phone to laptop using USB cable

- enable USB debugging on your phone and allow it when you see the popup

- you should see a green dot and 'connected' status with successful connection. (If you have troubles reconnect the device and check you have enabled USB debugging)

- open chrome browser on your phone

- click on your phone name displayed in your browser's 'remote devices' tab. This will show you the chrome version your phone has

- below the chrome version, you will see the url field. Type here the address of the application you wanna debug.

In my case I was debugging the app locally, so I put my IP address and port for local development.

- click 'open' button next to the url input field. This will open that page on your phone's chrome tab.

- as the url is opened on your phone, your will see 'inspect' button in your dev tools:

- when you click on 'inspect', it will open developer tools for your mobile browser connection. And there you can check whatever you want.

Nicole Hiller  |  Nana Janashia


©2018 by nnSoftware