调试 Android 中的 CSS 布局故障

Posted 2023-03-14

【中文标题】调试 Android 中的 CSS 布局故障

【英文标题】：Debugging CSS layout glitches in Android

【发布时间】：2011-07-18 09:43:15

【问题描述】：

我们有一个现有的网站，我被要求测试它与移动浏览器的兼容性。

我已将 android SDK 安装到我的台式电脑上。我可以在模拟器中查看我的 localhost 站点，并且我已经确定了 Android 浏览器中出现的页面布局中的一些故障。

但是由于任何桌面浏览器都不会出现这些问题，我一直在努力解决如何调试它们。例如，在 Firefox 中，很容易使用 Firebug 来查看哪些样式表已被应用，并动态调整它们以查看它如何影响布局。但我还没有找到在 Android 模拟器上做类似事情的方法。

问题是，如果没有反复试验，我该如何找出导致这些布局问题的原因？ Android 浏览器（或 Android SDK）是否有任何对调试 CSS 有用的工具？如果是这样，我该如何使用它们？

[编辑]我还没有找到解决方案，所以我向赏金猎人敞开大门......

【参考方案1】：

Weinre 可能最接近您要查找的内容：

如果您正在寻找可以让您实时调整布局的东西，那应该会让您满意。

【讨论】：

+1 和赏金。非常感谢你！这看起来正是我所追求的那种东西。那些 phonegap 家伙正在制作一些非常令人印象深刻的软件。

据我所知，当您使用 Android 浏览器时，weinre 不会显示 CSS 内容。也就是说，当您在 Chrome 中查看开发人员工具时，当您从正在调试的页面中选择元素时，“元素”选项卡下的“样式”部分没有响应。至少，它不适合我......

【参考方案2】：

https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US

https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US

https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US

我发现了几个选项，如果模拟器/模拟器就足够了，或者至少可以让你入门，它们看起来应该对你有用。这样做的好处是 Chrome 开发者工具似乎可以与插件一起使用！

【参考方案3】：

就个人而言，我更愿意在实际的 Android 硬件上执行此操作。在使用中，触摸屏手机与最精确的模拟器也大不相同；诸如伽玛、像素密度、性能、触摸交互（您的链接是否足够大？）、纵向/横向方向，甚至您将其握在手中的事实，都使其与桌面体验完全不同。如果您想查看您的网站在移动/Android 上的运行情况，请购买便宜的二手设备进行测试！

至于调试；我总是包含我自己的“日志”功能，如果萤火虫/浏览器控制台不可用，它会创建一个 div#console。这对于在手机上进行调试非常有效，但需要注意的是它涵盖了部分内容。然后，您可以使用

之类的内容打印出对象的当前样式

log(window.getComputedStyle(document.getElementById("myobj")); 

注意：以上方法在 IE 中不起作用。

【讨论】：

+1 表示答案；同意在真实硬件上进行测试很重要，但事实证明，模拟器对于处理一些基本布局问题很有价值。

【参考方案4】：

您可能已经看过了，但是 SDK 文档站点提供了一些关于在 Android 上开发和调试 Web 应用程序的基本信息：

Web Apps Overview

Debugging Web Apps

希望有帮助！

【讨论】：

感谢您的回复。我已经看到了，控制台的东西非常适合调试 javascript 错误（或者如果我有任何错误的话……），但这是我遇到问题的 CSS，而且这些链接似乎没有提供任何帮助。 （另外，它是一个普通的网站，而不是一个网络应用程序，但我确信一些相同的问题也适用）

【参考方案5】：

我不知道您如何检测移动设备，但我使用用户代理检测到客户端。因此，我可以简单地发送一个不同的用户代理字符串来测试运行良好的 CSS。

对于 Firefox，我使用 User Agent Switcher。此外，我使用 Web Developer 工具不仅可以查看所有设置，还可以使用 Resize 选项来模拟视口宽度。

Apple 的 Safari 有一个开发者扩展程序，也有一个用户代理切换器。您可以添加自己的用户代理字符串。

【讨论】：

感谢您的回答。我更担心在特定移动浏览器中出现的调试问题，因此在不同浏览器上的 UA 切换器可能对我的情况没有帮助。但在其他情况下这可能是一个有用的想法，所以我会给你一个 +1。

不错，无法模拟html/CSS/Javascript的实际实现和页面的渲染。

【参考方案6】：

Chrome 现在提供了执行此操作的工具。只需访问：

chrome://inspect/

连接您的设备并运行 ADB - 然后您可以使用所有 Chrome 网络元素检查工具。这适用于浏览器，也适用于在 WebView 中呈现的任何应用程序（例如 Cordova）。