Here are the steps on how to debug the web page being rendered on mobile particularly android device.

  1. First, Enable developer options, USB Debugging on Android. If you are not familiar on how to do that, you can follow the steps here: https://www.howtogeek.com/129728/how-to-access-the-developer-options-menu-and-enable-usb-debugging-on-android-4.2/
  2. Connect the device to the development machine - desktop/laptop via USB.
  3. On the Android device, go to Settings > Tethering and Mobile hotspot > Enable 'USB tethering' > Accept the RSA key prompt (if any).
  4. Open Chrome on your development machine and go to the following URL 'chrome://inspect/#devices' . Make sure 'Discover USB devices, Discover network targets' is enabled. Visit the desired page in Chrome browser on Android device. Now it should show you all the tabs open on your mobile device in a list.

Alt Text

You will be prompted on the screen above. In the Remote Target section, your android device will show up.

  1. Click on 'Inspect' to see the developer tools along with a live preview on the side.

Alt Text

Happy testing and debugging!