如何使用移动浏览器调试 JavaScript 代码

Posted 2023-03-31

【中文标题】如何使用移动浏览器调试 JavaScript 代码

【英文标题】：How to debug JavaScript code with mobile browsers

【发布时间】：2011-05-10 00:40:51

【问题描述】：

我知道 firebug 和主要现代桌面浏览器的开发人员工具，但我找不到任何在移动浏览器上调试 javascript 代码的方法。

我可以使用哪些高级技术在移动浏览器上调试代码？

【问题讨论】：

我所做的是在桌面浏览器中查看移动版本并在那里进行调试。

@JohnIsaacks 一些网站在桌面浏览器中显示不正确。我们的职责是在真实设备上调试它并为桌面浏览器修复它。

大部分时间都与大小有关，因此有一些在线工具（例如responsinator.com）可以在一个页面中显示不同手机和平板电脑尺寸的页面！ Here 是其中 10 个的列表。正如我测试的那样，responsinator.com 甚至可以使用您的 localhost 网址。就个人而言，这些工具满足了我对响应式网页设计的大部分类似需求。也可以通过chrome模拟不同的代理。

【参考方案1】：

android 设备可以通过设置>手机状态进入开发者模式，然后点击“内部版本号”7 次。这使您可以进行bunch of things (see step 5) 包括USB 调试。 （某些设备可能在软件信息下有内部版本号）

要激活 USB 调试，请在设置中查看新出现的“开发人员选项”，打开它并打开 USB 调试。使用直接 USB 连接来连接您的设备。

在桌面上的 Chrome 中，在用于调试的常用开发人员工具面板中，在菜单中查找更多工具>远程设备。选择发现 USB 设备后，您现在应该会在侧面看到您的移动设备。

选择它以查看您已打开的所有 chrome 选项卡的列表以及直接输入 URL 的能力。

选择其中一个链接将打开一个新窗口，左侧是您设备屏幕的镜像，右侧是所有熟悉的 chrome 调试工具。您仍然可以直接控制您的设备或在镜像屏幕上使用鼠标。它甚至可以旋转。

来自谷歌的on remote debugging 和来自 askvg.com 的how to enable developer mode（如上链接）的完整详细信息

【讨论】：

这个方法也适用于firefox。对于more info

【参考方案2】：

Android 为这些目的提供了一个工具集： https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

Apple 的做法类似： https://developer.apple.com/safari/tools/

教程：https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

【参考方案3】：

您可以使用任何 iPhone/iPad 在 Safari Mobile 上进行调试。在开发者菜单中，您可以找到您的设备，然后您可以使用检查器调试您的代码。

如果您有 Android 设备，您可以在 Chrome 桌面上调试（记得激活调试模式）chrome://inspect

【参考方案4】：

在 iPhone 上，您可以进入设置>Safari>高级并打开网络检查器

【参考方案5】：

有时我会收到客户报告的错误，这些错误在每次或在我们的测试中都无法重现。对于这种情况，我推荐Lucky Orange。它记录用户活动，还可以选择记录控制台消息。

PS - 我不是会员，我将它们用于我自己的项目并喜欢它。

【参考方案6】：

您可以使用 Chrome 远程调试器。检查here。

如果在这种情况下您没有使用移动版 Chrome，您可以使用 OutFront JS。它有助于将警告、错误和日志记录到 DOM。

【参考方案7】：

另一种基本调试解决方案（很多时候都需要）是在移动设备上使用控制台 polyfill，而无需在桌面设备上插入 USB。

mobileConsole 就是这样一个控制台 polyfill。

希望它对某人有所帮助，我发现它很有用。