如何远程调试 webview？

Posted 2023-02-19

【中文标题】如何远程调试 webview？

【英文标题】：How to debug webview remotely?

【发布时间】：2014-03-21 04:01:11

【问题描述】：

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

请给我建议

【问题讨论】：

Debug webview remotely

Debug xwalkview or webview remotely

【参考方案1】：

试试这个：

在设备中启用开发者选项（设置-->关于手机-->在版本号上点击 7 次）

打开开发者选项并启用 USB 调试（在开发者选项中）

将此行添加到您的自定义应用程序类或加载 Web 视图的 Activity 中

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

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

打开 Chrome 并输入 chrome://inspect/#devices，您应该会在远程目标列表中看到您的设备

点击检查进行调试。

更新： 您可以将其简化如下：

WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)

【讨论】：

手机需要连接USB吗？另外，如果我在模拟器中测试应用程序怎么办？

@Vineet'DEVIN'Dev 是的，您需要连接 USB。如果您想在没有 USB 的情况下连接，请在此处查看我的答案：***.com/a/44442586/2462531

你为什么要编辑？我相信用一个 & 符号是正确的

@ReDetection 回滚了，我还以为我少了一个&签了

有点最新的方式：WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)

【参考方案2】：

这对我有用，覆盖 MainActivity.java 中的方法 onCreate 并在方法 WebView.setWebContentsDebuggingEnabled(true) 中添加这一行。

我的代码如下所示：

package com.myapp;

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

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() 
        super.onCreate();
        //added this line with necessary imports at the top.
        WebView.setWebContentsDebuggingEnabled(true);
    

构建您的代码，在手机中打开您的应用程序并转到 chrome://inspect ，您会在此处看到您的应用程序。点击检查链接。

【讨论】：

谢谢。在 React Native v0.57.3 上仅供参考，无需导入 android.os.Bundle，因为 onCreate() 方法不再需要它

我认为 onCreate 方法不存在了，我收到错误no suitable method found for onCreate(no arguments)

【参考方案3】：

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

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

【参考方案4】：

我看到有一个关于 webView 的章节。你尝试了吗？ https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

似乎需要：

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

Chrome 30 或更高版本。

【讨论】：

嗨，Clijac，我看过那个部分。它只允许在 chrome 中调试 url，而我想要一些可以调试其中包含 webview 的 apk 的东西。

【参考方案5】：

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

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

帮我做IOS。

【参考方案6】：

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

打开 chrome://inspect/#device 进行调试。使用端口转发。 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews