如何在移动设备上调试网站？答案

【问题标题】：How to debug web sites on mobile devices?如何在移动设备上调试网站？
【发布时间】：2011-08-13 07:00:26
【问题描述】：

人们如何在移动设备上调试网站？

我希望能够像在桌面浏览器中使用 Inspector 一样操作 HTML 和 CSS，并调试 JavaScript。

【问题讨论】：

iOS 6 远程调试可用：stackoverflow.com/a/12762449/72428
Mobile Website Debugging的可能重复
这里的答案已经过时了。 Android、iOS 和 Windows Phone all 现在让您可以通过电缆将手机连接到计算机，并使用计算机上的开发工具检查和修改手机上的页面。我会尽量找时间添加答案。

标签： debugging mobile mobile-safari remote-debugging web-inspector

【解决方案1】：

你是用php来决定用户代理吗？

如果是这样，我使用..Fennec，然后将 fennec 用户代理添加到您的移动设备的例外列表中

if ($_SERVER['HTTP_USER_AGENT'] == '4.0b5') {
    return = true;
}

已添加：当只是为移动设备进行 css 交换时，我使用此 script 并将上述异常添加到 fennec。

【讨论】：

【解决方案2】：

我最近在为工作而开发的移动网站上遇到了同样的问题。我找到的最佳解决方案是使用 Safari 的 UserAgent 设置为 Iphone（确保您启用了 Safari 的开发人员工具）。您必须检测到用户来自移动设备，然后将他们重定向到您的移动 url 或加载特定于移动设备的样式表，因为此方法无法设置 css 媒体类型。

Firefox 也有此功能，但没有注册 webkit css 样式（我假设您将使用它们，因为它们适用于 Mobile Safari 和 Android）。

您的桌面浏览器和实际的移动浏览器之间会出现一些不一致的情况，但为了快速识别样式和 javascript 调试，它就像一个魅力。

希望这会有所帮助。

【讨论】：

如何将 Safari 的 UserAgent 设置为 iPhone？
在工具栏中点击Develop -> User Agent，你可以选择多种不同的UA。
我猜那只是在mac上？因为我在 Windows 版本的任何地方都没有该选项。
@moleculezz 您必须转到“设置”>“高级”并选中“在菜单栏中显示开发人员”（或类似文本）框。如果菜单栏本身是隐藏的（对我来说是默认设置）按 Alt。
请不要只使用-webkit-前缀——Android也有非WebKit浏览器，可能会出现其他平台。相反，首选方法是在构建时自动为 CSS 添加前缀。

【解决方案3】：

我使用模拟器和我的 osx 系统代理设置向在 Windows 机器上运行的 Fiddler 发送请求 - 这对移动 safari 的 javascript/内部内容没有多大帮助，但它至少向我展示了实际情况电线，让我即时拦截/记录/分析/调整事物，以确定哪些有效，哪些无效。

【讨论】：

【解决方案4】：

有了Google Chrome for Android Beta，您现在可以使用桌面上Google Chrome 内置的开发者工具来执行remote debugging。 Here is a video 演示这是如何工作的。

【讨论】：

【解决方案5】：

Adobe 刚刚发布了一个新工具一个新的检查和预览工具：Adobe Shadow。说明页面是here。

它将移动网页浏览与计算机同步，并允许执行网页检查和 DOM 操作。

【讨论】：

【解决方案6】：

有几种方法可以在移动设备上调试 DOM 和 JS。使用 Adobe Shadow，您还可以检查 localStorage。

温热
Adobe 阴影
对于 Mac 和 iPhone：iWebInspector

【讨论】：

【解决方案7】：

iWebInspector for iOS 非常适合在 iOS 中调试网页。

更新：自从我发布此答案以来，iOS 和 OS X 已经更新，现在您 Mac 上的 Safari 可以连接和调试 Mobile Safari。
查看Firebug Lite。
对于 Android 上的 Chrome，Remote Debugging 还不错！

【讨论】：

【解决方案8】：

有这个书签可以让你在 Safari iOS 上使用 Firebug。您必须在桌面上复制书签并将其通过电子邮件发送到您的 iOS 设备，否则它可以工作：

http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

【讨论】：

【解决方案9】：

在 Chrome 中：

设置 -> 工具 -> 开发者工具 -> 设置（右下角）-> 用户代理（在选项卡菜单中）-> “覆盖用户代理”

【讨论】：

我偶然发现了这个选项，假设因为 Safari 和 Chrome 使用 WebKit，这个选项也可以在 Chrome 上以某种方式使用。这需要更加明显！ +1

【解决方案10】：

这是正确答案，不知道为什么 Blaine 只留下评论！

iOS 6 远程调试可用：https://stackoverflow.com/a/12762449/72428

在 OS X 上，您可以在 iOS 模拟器和 iOS 6 设备上使用 Safari 网络检查器。

首先在桌面上启用 Safari 中的开发人员菜单。
接下来，在您的 iOS 设备（或模拟器）上启用远程调试。

设置 > Safari > 高级 > Web 检查器（开启）
返回计算机上的 Safari，单击开发者菜单，然后选择您的设备（例如 iPhone 模拟器、iPhone）

【讨论】：

【解决方案11】：

您可以将 iPhone 或 iPad 连接到 mac 计算机，并使用 Safari 的开发工具。 https://developer.apple.com/safari/tools/ 或者，有一些在线工具可以做同样的事情。检查http://farjs.com

【讨论】：

【解决方案12】：

打开Xcode自带的iOS模拟器，然后打开Safari，应该会在“开发”菜单中看到这个选项

像 Firebug 一样工作

【讨论】：

【解决方案13】：

有一个可以在移动设备上使用的精简版 Firebug 的书签。

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

您可以使用第二个小书签在 Android 上显示控制台日志

javascript:(function(){if((/android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i<arguments.length;i++){arr.push(arguments[i]);}this._log.push(arr.join(",%20"));},"trace":function(){var%20stack;try{throw%20new%20Error();}catch(ex){stack=ex.stack;}console.log("console.trace()\n"+stack.split("\n").slice(2).join("%20%20\n"));},"dir":function(obj){console.log("Content%20of%20"+obj);for(var%20key%20in%20obj){var%20value=typeof%20obj[key]==="function"?"function":obj[key];console.log("%20-\""+key+"\"%20->%20\""+value+"\"");}},"show":function(){alert(this._log.join("\n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20\""+msg+"\"%20at%20\""+"\",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();

farjs.com 也有这个（类似于 jsConsole）

javascript:(function(){ base_url = 'farjs.com'; base_path = ''; var _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://farjs.com/bookmarklets/injector_v1.js'; document.getElementsByTagName('head')[0].appendChild(_my_script);})()

除了weinre (Web Inspector Remote)。还有..

MIHTool iOS App : weinre 的包装器。提供免费版和付费版。
SocketBug：使用 Socket.IO 构建的远程调试实用程序
jsConsole ：一个简单的 JavaScript 命令行工具。但是，它还提供了桥接到其他浏览器窗口以远程控制和调试该窗口的能力 - 无论是在其他浏览器中还是完全在其他设备中。

【讨论】：

【解决方案14】：

我知道很久以前有人问过这个问题，但仍然希望我的回答能有所帮助。

您可以使用 NetBeans IDE 使用真正的 android 或 IOS 设备进行调试。只需确保您已安装 android SDK（适用于 android 设备），在 NetBeans 中打开您的项目，并在运行时选择 android 设备作为您的浏览器。

我觉得这很有帮助，因为您可以从设备上安装的不同浏览器中看到结果。

您可以使用此链接了解更多详情

http://wiki.netbeans.org/MobileBrowsers

【讨论】：

【解决方案15】：

我建议使用：https://www.vanamco.com/ghostlab/

这是一个可以在多个移动设备上一键调试的平台。

在浏览器中执行操作，可以选择传播到连接到私有 IP 的其他设备（并且这些设备应连接到同一网络并使用 IP 地址）。

您会看到一个 Chrome 开发人员界面，但您可以在其中进行 CSS 调整（更改将发生在每个连接的设备上）和 Javsascript 调试。

【讨论】：

【解决方案16】：

自从 Firebug Lite 停止工作后，我切换到了Eruda，它提供了一个控制台、一个 DOM 浏览器和一些其他功能。您可以使用小书签将其注入任何页面。

【讨论】：

【解决方案17】：

所有答案都有帮助。

如果您需要访问移动浏览器上的控制台日志以进行调试，您可以使用 OutFrontJS 之类的东西。它是一个 npm 包，可将您的控制台记录到 DOM。

【讨论】：