How to debug webview remotely?

Question

How can I do debug/inspect element of apk webview.
I have tried this but it is helpful only for chrome not for apk.

Please suggest me

Answer 1

This is what worked for me, override the method onCreate in MainActivity.java and add this line in the method WebView.setWebContentsDebuggingEnabled(true).

Here is what my code looks like:

package com.myapp;

import com.facebook.react.ReactActivity;
import android.webkit.WebView;
import android.os.Bundle;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "myapp";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //added this line with necessary imports at the top.
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

Build your code, open your app in phone and go to chrome://inspect , You would see your app listed over there. Click on inspect link.

Answer 2

Try this:

1. Enable Developer Options in Device (Settings-->About Phone-->Tap 7 times on build number)
2. Turn on Developer options and Enable USB Debugging (in Developer Options)

3. Add this line in your custom Application class or in the Activity where the Web View is loaded

   // if your build is in debug mode, enable inspecting of web views

   if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
       WebView.setWebContentsDebuggingEnabled(true);
   }
   

4. Open Chrome and type chrome://inspect/#devices and you should see your device in the Remote Target List

5. Click on inspect to debug it.

Happy coding..

Answer 3

If what you are looking for is a way to turn on WebView debugging for an app that you don't have the source code to, this can be done but you will need to decompile and recompile the app.

The instructions on how to do this can he found here: https://blog.speedfox.co.uk/articles/1524219174-Android_WebView_Hackery

Answer 4

To debug webviews in the android app, you have to set WebView.setWebContentsDebuggingEnabled(true) in the WebviewActivity

Open chrome://inspect/#device to debug. Use port forwarding. Hope this helps! https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

Answer 5

In react-native-webview they give an explanation for both IOS and Android.

https://github.com/react-native-community/react-native-webview/blob/master/docs/Debugging.md

Helped me on IOS.

Answer 6

I have see there is a chapter for webView.Have you try out? https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

Seems it need:

• An Android device or emulator running Android 4.4 or later, with USB debugging enabled as described in 2. Enable USB debugging on your device .

• Chrome 30 or later.