The purpose
Debugging a WebView (HTML, JavaScript) displayed on Android.
Specifically, perform the following tasks:
- Debugging my mobile web page
- Debugging web pages created or modified within the app
Debug
Prepare
Prepare Android-side
Enable Developer options. (See below for instructions on how to enable Developer options.)
Enable USB debugging in Developer options.
Windows-side setting
install adb (from Android Studio).
(I don’t have a PC without adb installed readily available, so I’m unsure if it’s strictly necessary, but the official documentation seems to suggest using adb.)
Install Chrome too.
Modify code
Modify the Android app code.
However, if you only want to see the logs, this is unnecessary; you can also check the logs in Chrome on Android.
Insert the following code. If it’s test code, you can just put it in the MainActivity’s onCreate method.
if ( Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT ) {
WebView.setWebContentsDebuggingEnabled(true);
}I am performing a version check, but this is unnecessary if the target environment is already determined.
Execute
This will display the webpage you want to debug on your Android device.
Enter the following URL into the Chrome address bar on your Windows machine.
chrome://inspect/A dialog will appear on your Android device asking you to allow USB debugging. Click “Allow.” (This may appear multiple times; click “Allow” each time.)
A list of Android devices connected as shown below, along with their WebView-enabled apps.
It may take some time (approximately one minute) for the display to appear.
If it does not appear, please re-enter the URL.
Find the page you want to debug and click “Inspect.”
If you see the DevTools displayed as shown below, you’ve succeeded.
If WebView.setWebContentsDebuggingEnabled(true); is called within your app, the same screen as on your Android device will be displayed on the left, allowing you to inspect and manipulate elements. Conversely, if WebView.setWebContentsDebuggingEnabled(true); is not called, the screen will not be displayed, and element manipulation will be unavailable (though logs will still be visible).
Result
We can debug web on applications displayed on Android.
comment