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

【问题标题】：How to debug JavaScript code with mobile browsers如何使用移动浏览器调试 JavaScript 代码
【发布时间】：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（如上链接）的完整详细信息

【讨论】：

【解决方案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。

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

【讨论】：