Remote Debugging of Mobile Apps on Android Platform using Google Chrome extension to Phone Extension

Among the three major mobile app development platforms iOS, Android and Windows Phone 8, Android is preferred by many of the companies, be it product based or service oriented, due to the rapid increase in number of Android powered smartphone users.

Sans the end users, Android platform is also a hot favorite among developers as it offers flexibility in the development process and convenient debugging / prototyping techniques. Having said this, we are here to brush through one of the most utile methods for debugging and editing an Android mobile application using Google Chrome extension to phone? The most interesting and utile part of it is the advantage of viewing the changes in real-time, as and when the changes are done.

How to debug your apps remotely using Google Chrome to phone extension?

There are certain preferred settings and preparatory steps to be followed to get started with the debugging process.

1, Enable USB debugging on your Android device

Go to Settings and Developer Options on your Android device

In devices using Android 4.2 and its later versions, the Developer Options will be hidden by default. To tap it out, go to Settings -> About phone and tap Build number seven times. Then, return to your previous screen to find Developer Options.

Make sure that the USB debugging is checked in the Developer Options.

2, Enable USB discovery in Chrome

Go to the Chrome Browser through your desktop and go to ://inspect. The other way to do this is to go to Chrome menu > Tools > Inspect Devices.

Have the Discover USB Devices option in the checked state.

3, Virtual Host Mapping

In order to configure virtual host mapping with Chrome for Android, the mobile device should communicate with a proxy installed on the host machine.

On the Android device:

1, Open Wi-Fi settings.

2, Open the current network by a long-press (The proxy setting is per-network.)

3, Once done, select Modify network.

4, Select Modify network.

5, Below the IP Address tap, the Show advanced options checkbox

6, Proxy settings will appear. Select Manual.

7, Set localhost as the Proxy hostname

8, The port which Android will let you use can be set as the Proxy Port

9, Click Save.

On the host machine:

1, Free proxy software like Charles Proxy or Squid should be installed.

2, The port which the proxy is using should be noted down. If you are using Charles Proxy you can access the port by going to Proxy > Proxy Settings. You can make a note of the port number in the HTTP Proxy > Port field.

3, Go to chrome://inspect/#devices on Google Chrome.

4, Select Port forwarding.

5, Enter 9000 in the Port field.

6, Enter localhost: 1234 where 1234 is the port retrieved in step 2.

7, Ensure the Enable port forwarding checkbox is checked.

4, Connect your device via USB

Connect your device with development machine through the USB cable

For those who are carrying out this process on Windows it is necessary to install the appropriate USB driver for your device. For details see the OEM USB Drivers on the Android Developers site.

Once you connect the device, an alert message will pop-up requesting permission for USB debugging from your computer.

The Always allow from this computer option can be checked in order to avoid the alert from popping up each time when you debug.

5, Debug a remote web view inside native Android applications

Once the connection is established for debugging over USB, every connected device along with its open tabs and debug-enabled WebViews will be displayed by the chrome://inspect page.

Have the Discover USB devices in the checked state and plug in your mobile device to see it getting showed up in chrome://inspect.

Select your preferred tab or WebView and click inspect link to open DevTools on it

In your remote device, open new browser tabs and type the URL in the text input field and then clickOpen.

Configuring WebViews for debugging

In order to begin with the debugging process of your WebView contents, you should enable it programmatically. This can be done by calling, within your application, setWebContentsDebuggingEnabled, which is a static method on the WebView class.

WebView webView = (WebView) findViewById(R.id.webView);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)

{

WebView. SetWebContentsDebuggingEnabled(true);

}

webView.loadUrl (“http://www.javacodegeeks.com”);

This setting works for all the WebViews of the application. It is important to note that the state of the debuggable flag in the application’s manifest doesn’t affect the web debugging. You can test the flag at runtime if you want to enable web debugging only when debuggable is true.

Well, these steps form the basics of remote debugging of mobile apps using chrome extension.

Source: https://developer.chrome.com/devtools/docs/remote-debugging