Debug Javascript code in Android Mobile Browser

[2524 views]

Debugging the javascript code in Android is not that easy task because of the limited built-in browser of Android. Here are some tricks that can be used in order to debug javascript in android mobile. There are many ways to debug Javascript in Android. Let's check it one by one:

Using Chrome Remote Debugging

Open the Chrome in development machine and click on the options button and select Developer Tools.
In the Developer Tools, you will see icon for Main menu options. Click the icon and select More tools.
In the More tools, Select the Remote devices and it will open one more tab. In that you will be able to see the connected mobile devices(Make sure that your device is connected to Computer and Discover USB devices option is enabled).
Select any of connected devices from the list and in that device open the chrome. Now you can start debugging in two ways:

Type the url of your website in the open tab of desktop remote connection.
Open the url from the mobile chrome browser ? Type the url in Android Chrome tab

When the URL is loaded, click on the Inspect button in the right side of the web URL, that you want to debug.

Using jsHybugger

This app only supports Native Android Browser

Download and Install the jsHybugger APK on your android device. It can be downloaded from their official website here jsHybugger
Enable USB debugging on you device.(Go to Settings -> Tap on Build Number 7 times) Note: This procedure differs from device to device
Plug the Android device into your desktop computer or laptop via USB
Run the jsHybugger app on the Android device.
Enter the target URL and page in the app. Press Start Service and finally Open Browser
Now come back to your desktop computer and open Chrome to chrome://inspect/
An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.