如何在android的webview中调试javascript

Posted 2023-04-18

【中文标题】如何在android的webview中调试javascript

【英文标题】：How to debug javascript in webview in android

【发布时间】：2012-05-17 11:20:42

【问题描述】：

我有一个在 ios 上运行良好但在 android 上运行良好的 webview。有没有一种工具可以让我在浏览器中连接到 Android webview 并使用 firefox 或 webkit 控制台对其进行调试？ 目前我不知道是什么导致 webview 在 Android 中不起作用。

在 iOS 中，我可以打开我的 iPad 或 iPhone 模拟器，打开 webview 窗格，并在我的桌面浏览器中监听端口 9999，它向我显示了您在 webkit 开发工具/调试工具中看到的工具。

我正在寻找类似的 Android 工具，或者至少让我开始调试。

【问题讨论】：

您是否安装了 Android SDK 的任何部分？包含一些工具，可让您从设备中读取 logcat。 Eclipse 使设置变得容易（ish）。这可能是一个很好的起点。不幸的是，尽管取决于实际导致您的问题的错误，它可能在某种程度上取决于您设备上的浏览器实现，如果您可以从日志中获得任何信息。

是的，我有 adb 日志，但我不需要做任何其他事情来确保 webview 将 javascript 相关错误转储到 logcat？

您是使用 webview 创建应用程序，还是使用库存设备浏览器？如果您创建了它，您是否尝试在股票浏览器中加载您的页面？

我有一个应用程序，该应用程序有一个 webview，它将转到我正在创建的站点的链接（我要调试的站点）。你是说我应该在模拟器的浏览器中打开那个网站（我想调试的那个）而不是在我的应用程序中进行调试？

作为调试的一个步骤 =) 根据浏览器的实现，它可能会吐出一些“普通”WebView 不会进入日志的信息

【参考方案1】：

调试 WebView 最简单的方法是通过 USB 将您的 Android 设备连接到 PC，然后使用 Chrome 开发工具检查您的 WebView。

所以，你需要：

1) 在我们的设备上激活 USB 调试。你可以找到它Settings >> Developer Options >> Debugging >> USB Debugging（激活复选框）

2) 通过 USB 将您的设备连接到计算机

注意：如果您在 Windows 上进行开发，请为您的设备安装适当的 USB 驱动程序。请参阅 Android 开发者网站上的 OEM USB Drivers。

3) 打开 Chrome 浏览器并在 URL 字段中输入：chrome://inspect/#devices

4) 确认“发现 USB 设备”已激活

5) 在您的设备上，系统会提示您允许从计算机进行 USB 调试。点击确定。

6) 在 chrome://inspect 页面上显示每个连接的设备。点击inspect连接设备，你会得到控制台。

更详细的手册是Debugging Android WebView

【讨论】：

到目前为止，对我来说最好的答案。

这比the accepted solution by far 更容易（2012 年，从那时起事情变得更容易了）。

这更像是调试Android上打开的网页？您还必须在 android webview 中启用调试。就像在 MatPag 的回答中一样。

好极了。我试图使用 espresso bt 无法找到元素 ID。现在我可以用它在 webview 中查看 html 页面并获取 id。你救了我的一天兄弟。谢谢。即使使用模拟器也能发挥魅力。

【参考方案2】：

查看weinre。它提供了类似于 Chrome 开发者的工具，用于从 WebKit 浏览器调试到在远程设备上运行的浏览器。

【讨论】：

很酷，谢谢保罗，但它适用于应用程序（我的应用程序）中的 android webview？或者只有模拟器中的通用安卓浏览器？意思是 weinre 只适用于安卓浏览器吗？

Weinre 有一些限制 - 它似乎限制了您可以检查元素的深度，并且它没有 javascript 调试。

如果它不调试 javascript 那么为什么选择它作为正确答案？标题写着“如何调试 javascript...”

虽然不提供 JavaScript 运行控制，但至少在编写答案时，没有什么更接近完整的调试器了。例如，除了完整的 HTML 浏览和更新之外，它还提供了从 weinre 控制台调用 JavaScript 函数的能力。

网站“debug.phonegap.com”链接失效。

【参考方案3】：

如果您不使用 Android 4.4，根据http://developer.android.com/guide/webapps/debugging.html，您将享受老式的调试方式...

如果您没有运行 Android 4.4 或更高版本的设备，您可以 使用控制台 JavaScript API 调试您的 JavaScript 并查看 将消息输出到 logcat。

对于 Android 4.4 及更高版本，您将享受远程调试，请参阅https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

从 Android 4.4 (KitKat) 开始，你可以使用 DevTools 来调试 原生 Android 应用程序中的 Android WebView 的内容。

【讨论】：

这个链接可能很有用：developers.google.com/chrome-developer-tools/docs/…

【参考方案4】：

这些是我在设备中调试WebView 内容的步骤：

在您的设备中启用开发者模式 将设备插入PC并启用USB调试（如果需要安装驱动程序）

将此行添加到您的自定义Application 类或加载webview 的Activity 中

//if your build is in debug mode, enable webviews inspection
WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);

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

从 Android Studio 开始调试您的应用 当WebView 被添加到布局中时，在您打开的选项卡中会出现一个带有检查按钮的屏幕截图，点击那里将打开一个 Chrome 开发者控制台

【讨论】：

参考：developers.google.com/web/tools/chrome-devtools/…

【参考方案5】：

如果您正在寻找调试在 webview 中运行的 javascript 代码的解决方案，请查看 jsHybugger - 用于 Android webviews 的 JavaScript/HTML5/CSS 调试器。

http://www.jsHybugger.org

【参考方案6】：

我在之前的项目中使用 javascript 处理过 webview，但遇到了同样的问题。 我还没有找到直接调试代码的方法，但我使用了 javascript 接口将信息发送到我的活动。通过这种方式，您可以记录 javascript 的活动或显示一些 Toast 消息。

当你的 java 方法没有被调用时，这通常意味着你的 JS 代码中出现了某种错误。

我知道这不是解决您的问题的高科技解决方案，但至少是这样，并且对我有用。

祝你好运， 沃塔

【讨论】：

它是什么 jaavascript 接口？

在继续之前，您应该阅读this。如果您不明白，我建议您阅读“addJavascriptInterface(Object, String)”方法

【参考方案7】：

试试OutFront JS

它将控制台消息记录到屏幕上。对调试移动浏览器很有帮助。

有帮助：

在移动浏览器中捕获警告、消息和错误。 列表项

适用于所有 手机浏览器，甚至是中文浏览器。

【参考方案8】：

尝试通过在桌面安装 adb 来访问设备的 ADB Logcat...

【讨论】：

我的立场是正确的 :-) ***.com/questions/468993/… 和 richchetwynd.com/2010/05/…