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 toChrome 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 > Portfield.
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 click Open.

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.lazykids.org”);


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.

TAGS :