How to debug any website access through your Mobile device (using Chrome)

#android #debug #webdev

Hi there! Here you'll quickly learn how to debug any website navigation from you mobile device (Android only).

With USB debugging + Chrome's Dev Tools you can see any logs, network requests, etc.

Requirements

Android device
USB data cable
A trustable desktop/laptop with Google Chrome

Setup

1. Enable the Developer mode

On your android you need to enable the developer mode. Usually this can be achieved by navigating to Settings => About Phone (or similar) and tapping the build number a couple of times (until it tells you the developer mode is enabled)

2. Enable USB Debugging

Once you have the developer mode enabled, you need to enable the USB Debugging: Settings => Developer Options => USB Debugging (or similar)

3. Connect your mobile device to your desktop/laptop

This step is just to connect your mobile device to your desktop/laptop via USB data cable. Your android system can require you to accept the USB debugging.

4. Debug the desired webpage on your desktop/laptop

Open the desired webpage on your mobile device (via chrome);
On your desktop/laptop open the following url through your chrome browser: chrome://inspect/#devices;
Within the devices tab you'll see the opened tabs from your mobile device. Select the desired and click on inspect

Then a new tab will be opened, and there you can use the Chrome Dev Tools functionalities like see the logs, network requests, and even navigate the website from your desktop/laptop