Debug UI5 apps on Chrome for Android (USB Debugging)

Chrome for desktop has emulator. So why debugging on device is required?

During a recent regression test cycle, a problem was reported in one of our UI5 app - an Input field not working as expected on Chrome(ver 48) in a Samsung Galaxy Tab.

I quickly switched on Emulator on Chrome(for desktop) and chose Nexus 7 as device, tested that app and everything worked like a charm. So why the problem reported by testing team?

Obviously, there is a difference between the rendering/handling of app on an actual device and in emulation. (Alert: this was my first hand experience so had to write it down).

Note: I could have chosen Galaxy SIII or Note 3 as an option but app was marked as incompatible with phones(due to functional reasons, UI5 shouldn't be cursed for it).

Getting to the root cause

Only way to find out is to debug the app on a tablet. A quick search give this link to debug applications while running in Chrome on Android. But, this doesn't work as Samsung Tab was not detected in Chrome Inspect.

So to make USB debugging work:

1. Download the Samsung Galaxy drivers from it's respective support page. For Galaxy Tab 3, I found the drivers(PC Sync) here.

2. Install drivers, restart the machine and make sure device is connected as Media Device(MTP)

3. Follow the process mentioned in Google document. Start Chrome Inspect and refresh.

4. It still doesn't work.

5. Some blogs suggested that this should be tried with Chrome Canary. But it didn't help. (Later I realized after correct steps that device was detected in both normal Chrome and Canary)

Now what?

This discussion came to rescue. Seems something was changed in Chrome that creates some problems with some devices. Lot of somes !!!

A re-iterated version of the steps mentioned in the rescue-blog:

1. Open your app in phone or tablet, which is to be debugged, in Chrome
2. On desktop, Download and install Android SDK ("SDK Tools Only" section)
3. Then open up the Command prompt and enter path to installation folder(that you gave during installation). In my case path was: C:\Users\myUserName\AppData\Local\Android\sdk\platform-tools
4. Run the command adb devices by typing it and pressing enter
5. Check if you get the prompt on your device, and say yes to it
6. If everything went well, then something like the following should come up

1. Refresh the chrome inspect
2. If you miss the prompt or still can't see your device in Inspect Devices run the following commands one by one (excluding the ") "adb kill-server" "adb start-server" "adb devices"

And this was the Eureka moment. My app showed up in the Chrome Inspect:

Now just choose Inspect and enjoy the debugging !

P.S. Any suggestions, corrections, additions, subtractions and multiplications are welcome.