DEV Community

Cover image for Debug a website (local or remote hosted)on an android mobile device
Manu Krishnan
Manu Krishnan

Posted on

Debug a website (local or remote hosted)on an android mobile device

Debugging from a desktop is very easy with the debugger and dev tools available with different browsers. Google's chrome dev tools is a handy tool for all web developers. But how do we inspect in a mobile browser, or see the network requests or even put a debug point? Most of the developers requires debugging a website that runs on localhost, which may not be possible from a mobile device without additional steps. I am trying to address this two problems here.
Pre requisites :-

  1. Google chrome on android device and desktop
  2. USB cable for debugging

Steps :-

  • Enable usb debugging on your android device (Various links are available for how to do this, am trying to reduce the scope here).
  • Open chrome in desktop and type chrome://inspect . We can see the devices in the network and the mobile device in devices

Chrome inspect device screen

  • Connect your android device via USB to the desktop. There may be a prompt on mobile for allow debug and allow that. You can see a new device is listed in devices list in chrome.

Android device in chrome devices

  • Now if we add a new tab or go to a website, the tabs and address will listed in desktop. Inspect link is right over there and click on that
  • This will open up a mobile screen cast and all the set of chrome dev tools options

The second problem is debugging a website hosted in local web server. By default android will not allow this as localhost for an android device means itself and there is no server running on android and it is running on the development machine. Chrome provides a way to forward port. i.e. you can add a port mapping so that requests coming on the device will forward it to development machine.
Steps to debug in localhost

  • Click on port forwarding in the devices tab. This will open port forward settings

Port forward settings

  • Add the required port and corresponding localhost address in the list. For example I just added port 3000 and its corresponding ip and port as localhost:3000.

Port forward settings detail

  • Check the enable port forwarding and click done. After this, just need to type in localhost:3000 in mobile browser. Boom..We are done. We can see the website hosted on 3000 port on your dev machine.

USB connected mobile device

mobile device chrome inspection

[Wrote this in medium few years back. Just switched to the dev.to forum]

Top comments (0)