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

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

---

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

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

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

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

---

添加：在为移动设备进行css交换时，我使用了此选项，并为fennec添加了上述例外情况。

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

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

在桌面浏览器和实际的移动浏览器之间，您会遇到一些不一致的地方，但是对于快速识别样式和javascript调试来说，它非常有效

---

希望这有帮助

我使用带有osx系统代理集的模拟器向运行在windows机器上的Fiddler发送请求——这对移动safari的javascript/内部内容没有多大帮助，但它至少向我展示了实际发生的事情，让我能够实时截取/记录/分析/调整事情，找出哪些有效，哪些无效。

现在，你可以使用桌面上内置于谷歌Chrome中的开发者工具。演示如何工作。

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

---

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

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

• 韦恩尔
• 土坯阴影
• 适用于Mac和iPhone:iWebInspector
• 对于iOS来说，在iOS中调试网页真是太棒了
  更新：自从我发布了这个答案，iOS和OS X已经更新，现在Mac上的Safari可以连接并调试Mobile Safari。

• 退房

• 对于Android上的Chrome来说，还不错

---

有一个书签，允许您在Safari iOS上使用Firebug。您必须将bookmarklet复制到桌面上并通过电子邮件发送到iOS设备，否则它将正常工作：
铬合金：

---

设置->工具->开发人员工具->设置（右站点底部）->用户代理（在选项卡菜单中）->“覆盖用户代理”
这是正确的答案，不确定Blaine为什么只将其作为注释留下

---

从iOS 6开始，远程调试可用：
在OS X上，您可以在iOS模拟器和iOS 6设备上使用Safari web inspector
• 首先在桌面上的Safari中启用开发者菜单
• 接下来，在iOS设备（或模拟器）上启用远程调试
  设置>Safari>高级>Web检查器（打开）

• 返回计算机上的Safari，单击开发者菜单，然后选择您的设备（例如iPhone模拟器、iPhone）

---

您可以将iPhone或iPad连接到mac电脑，并使用Safari的开发工具。

---

另外，也有一些在线工具可以做同样的事情。选中
打开Xcode附带的iOS模拟器，然后打开Safari，您将在“开发”菜单中看到此选项

---

与Firebug的工作原理一样
有一个用于Firebug精简版的bookmarklet，您可以在手机上使用

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');

您可以使用第二个bookmarklet在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();}});}})();

---

除此之外。还有
• ：韦恩尔的包装纸。免费版和付费版

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

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

---

我知道这个问题很久以前就被问到了，但还是希望我的回答能有所帮助
您可以使用NetBeans IDE使用真正的android或IOS设备进行调试。只需确保安装了android SDK（适用于android设备），在NetBeans中打开项目，并在运行时选择android设备作为浏览器
我觉得这非常有帮助，因为您可以从安装在设备上的不同浏览器中看到结果
您可以使用此链接了解更多详细信息
我建议使用：
它是一个平台，您可以在多个移动设备中通过单击进行调试
在浏览器中执行操作时，可以选择传播到连接到专用IP的其他设备（这些设备应连接到同一网络并使用IP地址）

---

您将看到一个Chrome开发者界面，但在那里您可以进行CSS调整（更改将发生在连接的每个设备上）和JavsScript调试。
自从Firebug Lite停止工作以来，我切换到了，它提供了控制台、DOM资源管理器和其他一些功能。您可以使用bookmarklet将其注入任何页面

---

所有的答案都很有帮助

---

如果您需要访问移动浏览器上的控制台日志进行调试，您可以使用以下方法。它是一个npm软件包，可以将您的控制台记录到DOM。
如何将Safari的UserAgent设置为iPhone？在工具栏中单击“开发”->“用户代理”，您可以选择大量不同的UA。我想这只是在mac上？因为我在windows版本的任何地方都没有这个选项

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);})()