How to inspect the elements inside hybrid and web Android apps

We can use chrome to inspect the elements inside android web apps.

Ensure that you have attached the device to computer in USB mode. Also ensure that version of Android OS is 4.4 or higher. You can use  adb devices command to check that device is connected properly.

Note that – In hybrid apps, the Webview control is used. In such cases, developer should make the debugging enabled for the Webview control. Developer needs to add below line of code at the time of initializing the Webview control.

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
WebView.setWebContentsDebuggingEnabled(true);
}

If the debugging is not enabled for the Webview control, chrome will not be able to inspect the elements.

Next, you have to enter below line in the chrome address bar.
chrome://inspect/#devices

Below image shows how to inspect the apps in chrome. Note that below image shows mobile GT-I9060I is connected to computer in debug mode. It shows the all web and hybrid apps that are open in the Android phone.

Inspecting the elements inside Android app using chrome

Once you hit inspect button, html source code is displayed as shown in below image.

Html source of Android app in chrome

Apart from above methods, you can also use mobile emulation in chrome to inspect the elements inside web Android app as shown in below image. We can view the web app as displayed in various mobile devices like iPhone, Android Nexus, Samsung Galaxy etc.

Mobile emulation in chrome