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

Question

我想在我的Android浏览器中检查我的网站CSS/HTML元素.

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

最好的方法是什么？

Answer 1

不得不调试原生Android浏览器的网站,来到这里.所以,我想weinre的OS X 10.9(如weinre服务器)上用Firefox 30.0(weinre客户端)和一个Android 4.1.2(目标).我真的非常对结果感到惊讶.

从http://nodejs.org/download/下载并安装节点运行时
安装weinre: sudo npm -g install weinre
在设置>网络中找到您当前的IP地址
在您的计算机上设置weinre服务器: weinre --boundHost YOUR.IP.ADDRESS.HERE
在您的浏览器中调用: http://YOUR.IP.ADRESS.HERE:8080
您会看到一个脚本代码段,将其放入您的网站: <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步之后的某个地方,当然我必须接受传入连接.

:)快乐的调试

PS我仍然不知所措有多好.甚至元素 - 突出工作O_O°

Answer 2

Android版Chrome可以使用桌面上的Chrome开发者工具检查从Android设备上的Chrome应用程序加载的HTML.

我对此没有意见，但是如果我能够在 Android 浏览器而不是 Chrome 中执行此操作，我会更高兴，主要是因为 Chrome 已经运行良好，并且……您知道，兼容性问题使我不得不降级内容，但是我没有办法测试它:( (6认同)
这个答案需要使用台式电脑,这有点打破了在移动设备上做这件事的全部意义.无论如何,如果我必须将手机连接到桌面,我可以在桌面上打开Chrome的开发工具. (4认同)
@Goodwine看看https://www.jshybugger.com/.它是目前调试Android浏览器的最佳解决方案. (2认同)
@PaulIrish在这篇文章发表时,我一直在寻找,并找到了[weinre](http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html),一旦你发现它真的很棒能够处理它:) (2认同)

Answer 3

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

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

转到地址栏并在"HTTP"之前键入"view-source:"并重新加载页面.

将显示页面的整个元素.

这只是显示了源代码，但实际上并不允许您检查元素（即查看相关的“css”样式信息） (9认同)
这不适用于动态创建的元素，例如javascript制作的元素 (7认同)
这不是检查元素，这是查看源代码的方法。 (3认同)
OP只是询问检查，但是暗示检查工具的访问权限是。查看源与检查元素不同。通常，这样做是为了实时修改CSS等。虽然可以通过将Android手机连接到桌面来完成此操作，但是如果用户无需桌面就可以编辑元素，这将很方便。 (2认同)