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

Question

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

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

Answer 1

使用Google Chrome for Android Beta，您现在可以使用桌面版Google Chrome中内置的开发人员工具remote debugging。 Here is a video展示了这是如何运作的。

Answer 2

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

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

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

希望这会有所帮助。

Answer 3

这是正确的答案，不确定为什么布莱恩只留下它作为评论！

从iOS 6开始，可以使用远程调试：https://stackoverflow.com/a/12762449/72428

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

1. 首先在桌面上的Safari中启用“开发人员”菜单。

2. 接下来，在iOS设备（或模拟器）上启用远程调试。

   设置＆gt; Safari＆gt;高级＆gt; Web Inspector（ON）

3. 在计算机上返回Safari，点击开发人员菜单，然后选择您的设备（例如iPhone模拟器，iPhone）

Answer 4

在Chrome中：

设置 - ＆gt;工具 - ＆gt;开发人员工具 - ＆gt;设置（右侧网站底部） - ＆gt;用户代理（在标签菜单中） - ＆gt; “覆盖用户代理”

Answer 5

适用于iOS的

• iWebInspector对于调试iOS中的网页真是太棒了。

  

  更新：自从我发布此答案后，iOS和OS X已经更新，现在Mac上的Safari可以连接并调试Mobile Safari。

• 查看Firebug Lite。

• 对于Android上的Chrome，Remote Debugging还不错！

Answer 6

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

• weinre
• Adob​​e Shadow
• 适用于Mac和iPhone：iWebInspector

Answer 7

可以在移动设备上使用精简版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命令行工具。但是，它还提供了跨越其他浏览器窗口以远程控制和调试该窗口的能力 - 无论是在另一个浏览器还是其他设备中。

Answer 8

Adob​​e刚刚发布了一个新的检查和预览工具：Adobe Shadow。包含说明的页面为here。

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

Answer 9

打开Xcode附带的iOS模拟器，然后打开Safari，你应该在＆＃34; Develop＆＃34;中看到这个选项。菜单

就像Firebug一样工作

Answer 10

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

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

Answer 11

我使用我的osx系统代理集的模拟器向在Windows机器上运行的Fiddler发送请求 - 这对于移动Safari的javascript /内部功能没什么帮助，但它至少告诉我实际上是什么电线，让我拦截/记录/分析/调整动态，找出哪些有效，哪些无效。

Answer 12

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

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

我发现这非常有用，因为您可以看到设备上安装的不同浏览器的结果。

您可以使用此链接获取更多详细信息

http://wiki.netbeans.org/MobileBrowsers

Answer 13

自从Firebug Lite停止工作以来，我已切换到Eruda，它提供了一个控制台，一个DOM资源管理器以及更多功能。您可以使用小书签将其注入任何页面。

Answer 14

您使用php来决定用户代理吗？

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

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

已添加：在为移动设备执行css交换时，我使用此script并为fennec添加上述异常。

Answer 15

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

Answer 16

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

这是一个平台，您只需点击一下即可在多个移动设备中进行调试。

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

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

Answer 17

所有答案都有帮助。

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