Debugging JavaScript on Android using Chrome

Nowadays almost all applications that we develop are made mobile friendly and a lot of times, everything works perfectly on desktop browsers but not on mobile. Even if we know it is some javascript that is not working as expected, it becomes quite difficult to narrow down on what is causing the problem.

As we cannot check console there, I used to add alert statements to check the flow and intermediate values. But using alerts is not the best way to debug stuff. This link explains it.

Here are the steps that you can follow to get a console for your Android chrome browser.

• On your mobile, go to Settings -> About Phone
• Tap on build number. Depending on the phone you are using you will have to tap “build number” 4 or 7 times. When you tap it once, it shows how many times you have to tap again. On Nexus its 7.
• Now go to Settings -> Developer Options and turn on USB debugging.
• Connect your phone to a laptop.
• Open Chrome on the desktop, go to chrome://inspect/#devices
• You will be asked for confirmation on the mobile phone. Accept it
• You will see a list of pages that you have opened on mobile. You can switch tabs, reload the page on your mobile now using a desktop browser.

Now you can see all your console logs and check everything that was not so easy with alerts.