如何在移动设备上debugging网站？

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

我想能够操纵HTML和CSS类似于在桌面浏览器中使用Inspector，并debuggingJavaScript。

Answer 1

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

从iOS 6远程debugging是可用的： https : //stackoverflow.com/a/12762449/72428

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

1. 首先在桌面上的Safari中启用开发者菜单。

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

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

3. 返回到您的计算机上的Safari，单击开发人员菜单，并select您的设备（如iPhone模拟器，iPhone）

Answer 2

我最近碰到了一个我正在开发的移动网站的问题。 我find的最佳解决scheme是使用Safari的UserAgent设置为Iphone（确保您已启用Safari的开发人员工具）。 您必须检测到用户来自移动设备，并将其redirect到您的移动url或加载移动设备的特定样式表，因为此方法无法设置css媒体types。

Firefox也有这个function，但是没有注册webkit css风格（我假设你将在使用Mobile Safari和Android时使用它）。

你会遇到你的桌面浏览器和你的实际的手机浏览器之间的一些不一致，但为了快速识别风格和JavaScriptdebugging它像一个魅力工作。

希望这可以帮助。

Answer 3

借助Google Chrome for Android Beta，您现在可以使用桌面上的Google Chrome内置的开发人员工具进行远程debugging 。 这是一个video演示如何工作。

Answer 4

在Chrome中：

设置 – >工具 – >开发工具 – >设置（右下angular） – >用户代理（在标签菜单中） – >“覆盖用户代理”

Answer 5

• iWebInspector for iOS在debuggingiOS中的网页方面真的很棒。

  

  更新：因为我发布了这个答案，iOS和OS X已经更新，现在Mac上的Safari可以连接并debuggingMobile Safari。

• 检查Firebug Lite 。

• 对于Android上的Chrome， 远程debugging并不坏！

Answer 6

debugging移动设备上的DOM和JS有几种方法。 使用Adobe Shadow，您也可以检查localStorage。

• weinre
• Adobe 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应用程序 ：weinre的包装。 免费版本和付费版本可用。

• SocketBug ：使用Socket.IO构build的远程debugging实用程序

• jsConsole ：一个简单的JavaScript命令行工具。 但是，它还提供了桥接到其他浏览器窗口的function，可以远程控制和debugging该窗口 – 完全可以在另一个浏览器或其他设备上。

Answer 8

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

它使移动网页浏览与电脑同步，并允许执行网页检查和DOM操作。

Answer 9

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

像Firebug一样工作

Answer 10

我使用模拟器与我的osx系统代理集来发送请求到在Windows机器上运行的提琴手 – 这不利于JavaScript /内部的东西到移动Safari，但它至less告诉我什么是实际上通过电线和让我可以拦截/logging/分析/调整东西，找出哪些是有效的，哪些不是。

Answer 11

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

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

Answer 12

我知道这个问题很久以前就被问过了，但是仍然希望我的回答能够帮上忙。

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

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

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

http://wiki.netbeans.org/MobileBrowsers

Answer 13

你使用PHP来决定用户代理吗？

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

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

补充：当只做移动的css交换我使用这个脚本并且添加上面的例外给它为fennec。

Answer 14

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

Answer 15

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

这是一个平台，您可以在一个点击多个移动设备进行debugging。

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

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