如何在 Android 浏览器中检查元素？

Posted 2023-03-07

【中文标题】如何在 Android 浏览器中检查元素？

【英文标题】：How can I inspect element in an Android browser?

【发布时间】：2012-10-31 01:55:35

【问题描述】：

我想在我的 android 浏览器中检查我的网站 CSS/html 元素。

但是它将通过智能手机或 Android SDK。

最好的方法是什么？

【问题讨论】：

Inspect UI elements in Android 的可能重复项

【参考方案1】：

Android 上的 Chrome 可以使用桌面上的 Chrome 开发人员工具来检查从 Android 设备上的 Chrome 应用程序加载的 HTML。

见： https://developers.google.com/chrome-developer-tools/docs/remote-debugging

【讨论】：

我没问题，但是如果我能够在 Android 浏览器而不是 Chrome 中执行此操作，我会更高兴，主要是因为 Chrome 已经很好用了，而且......你知道，兼容性问题让我不得不降级东西，但我无法测试它:(

@Goodwine 看看jshybugger.com。是目前调试Android浏览器的最佳方案。

@PaulIrish 在发这篇文章的时候，我一直在寻找，发现weinre，一旦你能够处理它，它就会非常好用:)

@Paul Irish - 它会下载一些新鲜食物查找器应用程序，我不明白

这个答案需要使用台式电脑，这有点违背了在移动设备上执行此操作的全部意义。如果我必须将手机连接到它，我可以在桌面上打开 Chrome 的开发工具。

【参考方案2】：

不得不为原生 Android 浏览器调试一个站点并来到这里。所以我在带有 Firefox 30.0（weinre 客户端）和 Android 4.1.2（目标）的 OS X 10.9（作为 weinre 服务器）上尝试了weinre。我对结果感到非常非常惊讶。

从http://nodejs.org/download/下载并安装节点运行时 安装weire：sudo npm -g install weinre 在“设置”>“网络”中查找您当前的 IP 地址 在您的机器上设置 weinre 服务器：weinre --boundHost YOUR.IP.ADDRESS.HERE 在您的浏览器中调用：http://YOUR.IP.ADRESS.HERE:8080 您会看到一个脚本 sn-p，将其放入您的站点：<script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script> 在本地浏览器中打开调试客户端：http://YOUR.IP.ADDRESS.HERE:8080/client 最后在您的 Android 上：调用您要检查的站点（其中包含脚本的站点）并查看它在您的本地浏览器中如何显示为“目标”。现在你可以打开“元素”或任何你想要的。

也许 8080 不是您的默认端口。然后在第 4 步中，您必须致电 weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE。

我不记得具体是什么时候了，也许是在第 5 步之后的某个地方，当然，我不得不接受传入连接提示。

调试愉快

附：我仍然对它的效果感到不知所措。甚至元素突出显示工作

【讨论】：

或者在第4步中使用weinre --boundHost -all-绑定到所有接口

另外，我必须使用 ngrok 远程创建隧道。确保将 ngrok 绑定到相同的 IP 地址（而不是 localhost），否则它将无法工作ngrok http 192.168.0.104:8080 然后在脚本标签中使用 ngrok url。

非常感谢！帮助在 UC 浏览器中调试网站。有时 body 标签在检查器中似乎是空的，重新加载页面正在解决这个问题。

这很好，而且效果很好......但是这个答案让我找到了一种只使用Android设备进行调试的方法；无需其他机器。只需在 Android 设备上安装 Termux，然后执行“pkg install nodejs”，最后执行“npm -g install weinre”。然后您可以从第 4 步继续。您将在 Android 设备中运行 Weinre 服务器，并且可以使用 Android 网络浏览器进行连接。

现在也需要修复一个 Weinre 错误：***.com/a/46426558/694469

【参考方案3】：

您可以使用 Chrome 浏览器在 Android 设备中检查网站的元素。

打开您的 Chrome 浏览器并转到您要检查的网站。

转到地址栏并在“HTTP”之前输入“view-source:”并重新加载页面。

将显示页面的整个元素。

【讨论】：

这不适用于动态创建的元素，例如由 javascript 制作的元素

OP 只是询问了检查，但暗示的是对检查器工具的访问。查看源与检查元素不同。通常人们想要这样做是为了实时修改 CSS 等。虽然这可以通过将 Android 手机连接到桌面来完成，但如果用户可以在不需要桌面的情况下编辑元素会很方便。

这只是显示源代码，但实际上不允许您检查元素（即查看相关的css 样式信息）

这不是检查元素，这是查看源代码的方法。

【参考方案4】：

如果您想检查 html、css 或者您的移动浏览器中可能需要 js 控制台。您可以使用出色的工具 eruda 使用它，您可以在移动浏览器上拥有与桌面设备相同的开发人员工具。不要忘记投票 :) 这是一个链接https://github.com/liriliri/eruda

【参考方案5】：

只需将此代码作为链接添加书签：

javascript:(function ()  var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function ()  eruda.init()  )();

并在打开站点后打开书签（在搜索栏中搜索 SAVED 名称）。书签将出现在您的搜索栏上，打开它，您将在 Android 上拥有检查元素。