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 :-
- Google chrome on android device and desktop
- USB cable for debugging
- 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
3. 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.
4. 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
5. 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
2. 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.
3. 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.