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

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

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

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

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

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

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

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

   设置> Safari>高级> Web检查器（ON）

3. 返回计算机上的Safari，单击“开发人员”菜单，然后选择您的设备（例如，iPhone Simulator，iPhone）

借助适用于Android Beta的Google Chrome浏览器，您现在可以使用桌面版Google Chrome浏览器中内置的开发人员工具进行远程调试。这是一个演示其工作原理的视频。

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

Firefox也具有此功能，但是不注册webkit css样式（我认为您将在移动Safari和Android上使用它们）。

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

希望这可以帮助。

在Chrome中：

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

• 适用于iOS的iWebInspector在调试iOS中的网页方面确实很棒。

  

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

• 查看Firebug Lite。

• 对于Android上的Chrome，远程调试还不错！

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

• 威纳
• Adobe阴影
• 对于Mac和iPhone：iWebInspector

有一个适用于精简版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检查器）。还有..

• MIHTool iOS应用程序：Weinre的包装。提供免费版本和付费版本。

• SocketBug：使用Socket.IO构建的远程调试实用程序

• jsConsole：一个简单的JavaScript命令行工具。但是，它还具有跨其他浏览器窗口进行桥接以远程控制和调试该窗口的功能-无论是在其他浏览器中还是在其他设备中。

Adobe刚刚发布了一个新工具，即新的检查和预览工具：Adobe Shadow。带有说明的页面在这里。

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

打开Xcode随附的iOS模拟器，然后打开Safari，您应该在“开发”菜单中看到此选项

就像萤火虫一样工作

我将模拟器与osx系统代理一起使用，以将请求发送到在Windows机器上运行的Fiddler，这对于将javascript /内部内容传输到移动safari并没有多大帮助，但至少可以告诉我网络上到底发生了什么，并且让我即时拦截/记录/分析/调整事物，以找出有效的方法和无效的方法。

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

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

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

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

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

您可以使用此链接了解更多详细信息

http://wiki.netbeans.org/MobileBrowsers

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

您是否使用php来决定用户代理？

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

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

补充：在为移动设备进行css交换时，我使用此脚本，并为fennec添加上述例外。

您可以将iPhone或iPad钩接到Mac计算机上，然后使用Safari的开发工具。https://developer.apple.com/safari/tools/ 另外，有些在线工具也可以做到这一点。检查http://farjs.com

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

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

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

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