In order to debug any web page currently visible in Chrome browser or webview on an Android device, you will need to enable USB debugging and connect your Android device to a Linux PC via a USB cable.
Enabling USB Debugging on an Android Device
The USB debugging toggle can be found under the hidden “Developer Options” menu on Android devices. To enable the developer options view, you have to tap “Build Number” entry 7 times in system settings. As there are numerous Android devices with different user interfaces and versions, there is no one set standard way to find the build number. You can use the search bar in Android system settings to locate and directly go to the build number option, or you can manually navigate system settings to find it. Usually, it lies in the same menu that shows the Linux kernel version on an Android device.
Once you have enabled developer options, toggle the switch for USB debugging. Be careful not to touch other settings in developer options as misconfiguration can lead to system breakage. For reference, here is how the USB debugging option looks like on my Samsung Android device:
Installing Android Debug Bridge (ADB) on Linux
ADB is an official debugging tool provided by Google to debug Android OS and Android devices. It facilitates data sharing and communication between a PC and an Android device. ADB is required for remote debugging of a web page currently live on an Android device. It is also used to authenticate and verify your Android device’s connection with your Linux PC.
To install ADB on Ubuntu, run the command below:
ADB packages are available by default on almost all major Linux distributions. If you are using a Linux distribution other than Ubuntu, search for the term “ADB” in the package manager and install it from there.
Now connect your Android device to your Linux system through a USB cable. In case you are connecting your USB debugging enabled Android device for the first time, you will receive an authorization prompt on your Android device. You must accept it to proceed further. Run the command below after accepting the prompt to check the successful connection and authentication status:
The screenshot below shows the output of the command. If you can see a serial number under the “List of devices attached” heading, a successful connection has been made. If there is an “unauthorized” keyword just next to the serial number, unplug the device, reconnect it and then accept the authorization prompt again (you may have missed the prompt or accidentally closed it).
Remote Debugging a Mobile Web Page on Desktop Chrome Browser
Type “chrome://inspect/#devices” URL in the Chrome address bar and hit enter key. Check the “Discover USB devices” checkbox. You will now be able to see a list of all websites/web apps opened in Chrome, Chromium, or any Chrome / Chromium-based browser or webview on your Android device.
Just click on the “inspect” link to start debugging. You will get the same full set of developer tools that is available for debugging websites on a desktop PC.
Note that the website or webapp your debugging should be visible and live on your Android device. If you switch apps, tabs, or turn off-screen, the preview area may be greyed out.
Conclusion
Connecting your Android device to a Linux PC for remote debugging websites is pretty straightforward and takes a couple of steps. While you can debug responsive layouts and simulate mobile views on the desktop itself, remote debugging is especially useful if you are developing hybrid apps for Android or using webviews.
