Android 如何远程调试webview?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21903934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-20 05:17:27  来源:igfitidea点击:

How to debug webview remotely?

androiddebuggingandroid-webviewinspect

提问by Kundan Atre

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

如何调试/检查 apk webview 的元素。
我试过这个,但它只对 chrome 有帮助,对 apk 没有帮助。

Please suggest me

请建议我

回答by Shylendra Madda

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/#devicesand you should see your device in the Remote Target List

  5. Click on inspect to debug it.
  1. 在设备中启用开发者选项(设置-->关于手机-->点击内部版本号7次)
  2. 打开开发人员选项并启用 USB 调试(在开发人员选项中)
  3. 在您的自定义应用程序类或加载 Web 视图的活动中添加此行

    // 如果您的构建处于调试模式,则启用 Web 视图检查

    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
    
  4. 打开 Chrome 并输入chrome://inspect/#devices,您应该会在远程目标列表中看到您的设备

  5. 单击检查以对其进行调试。

Happy coding..

快乐编码..

回答by Muthukrishnan

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

这对我有用,覆盖方法并在方法onCreateMainActivity.java添加这一行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.

构建您的代码,在手机中打开您的应用程序并转到 chrome://inspect ,您会看到您的应用程序在那里列出。单击检查链接。

回答by clijiac

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

我看到有一个关于 webView 的章节。你试过了吗?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.

  • 运行 Android 4.4 或更高版本的 Android 设备或模拟器,启用 USB 调试,如 2. 在您的设备上启用 USB 调试中所述。

  • Chrome 30 或更高版本。

回答by DanielM

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

如果您正在寻找一种为没有源代码的应用程序打开 WebView 调试的方法,则可以这样做,但您需要反编译并重新编译应用程序。

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

他可以在此处找到有关如何执行此操作的说明:https: //blog.speedfox.co.uk/articles/1524219174-Android_WebView_Hackery

回答by bitsabhi

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

要在 android 应用程序中调试 webviews,您必须在 WebviewActivity 中设置 WebView.setWebContentsDebuggingEnabled(true)

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

打开 chrome://inspect/#device 进行调试。使用端口转发。希望这可以帮助! https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

回答by Vitor Hugo Bettani

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

在 react-native-webview 他们给出了 IOS 和 Android 的解释。

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

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

Helped me on IOS.

在IOS上帮助我。