如何在运行 chrome 浏览器的手机上对 HTML/CSS 进行故障排除？

Posted 2023-02-25

【中文标题】如何在运行 chrome 浏览器的手机上对 HTML/CSS 进行故障排除？

【英文标题】：How can I troubleshoot HTML/CSS on my mobile phone running a chrome browser?

【发布时间】：2021-11-22 12:37:15

【问题描述】：

我在我的 PC 上使用 Chrome 调试器来调试我的 Web 应用程序，它有一个新的方便的功能，我可以将调试器设置为移动设备，在本例中是 Iphone 7。

据说这可以让您模拟移动设备。然而，尽管这样做我得到了不同的结果，也就是说，它没有准确地模拟 iPhone 7 设备。

移动浏览器中完全缺少一个 SVG 组件。很奇怪。

我从未在移动设备上对我的网络应用程序进行过故障排除，但需要一种方法来解决此问题。我还需要一种方法来报告调试器没有准确地模拟移动设备。

我做了一些谷歌搜索，发现了这个SO Q/A，但它大约有 10 年的历史了。

这是模拟器的屏幕截图和我的移动设备上实际上缺少的图标：

【问题讨论】：

我有点困惑：你的问题标题-- “如何在运行 chrome 浏览器的手机上解决 html/CSS 问题？””-- 成功了听起来您想在实际设备上调试您的网站，但问题主体听起来好像您只是想要一种方法来准确模拟网站，就好像它在设备上运行一样。它是什么？

我想要一些准确且有效的东西。当前使用桌面 Chrome 调试器无法准确模拟移动浏览器。无论工作如何，无论是准确的模拟器还是实际设备

如果您有 Mac，您可能能够获得 XCode（用于 ios 开发）和 android Studio（用于 Android 开发），看看是否可以使用它们的模拟设备并将它们指向运行 Web 应用程序的本地主机端口。此外，对于 Android 设备，您可以实际上将它们插入设备并使用 Chrome 开发工具在手机中调试 Chrome 上运行的页面 - 不过不确定这是否适用于 iPhone。跨度>

【参考方案1】：

这些情况很棘手...您需要使用设备模拟器，例如https://crossbrowsertesting.com/