1. 首页
  2. 问答
  3. 如何在移动设备上调试网站？

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

2011-04-26 123 views
64

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

我希望能够操纵HTML和类似桌面浏览器中使用CSS检查和调试JavaScript的。

来源

2011-04-26 Crashalot

+4

截至iOS 6远程调试是可用的：http://stackoverflow.com/a/12762449/72428 – Blaine 2012-10-06 18:21:35

+1

可能重复的[移动网站调试]（http://stackoverflow.com/questions/4285686/mobile-website -debugging） – givanse 2014-02-17 05:28:59

+1

这里的答案是非常过时的。 [Android的]（https://developer.chrome.com/devtools/docs/remote-debugging），[iOS的]（https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted /GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW8）和[Windows手机（https://dev.windowsphone.com/en-us/oem?contentName=docs%2FDebugging%2FDebugging_Windows_Phone）*所有*现在允许您通过电缆将手机连接到计算机，并使用计算机上的开发工具来检查和修改手机中的页面。我会尽力找到添加答案的时间。 – 2015-05-13 23:16:40

回答

16

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

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

在OS X上，你可以使用Safari的网络督察在iOS模拟器和iOS 6的设备。

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

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

    设置>野生动物园>高级> Web检查（ON）

  3. 回到Safari浏览器在您的计算机上，单击开发菜单，并选择您的设备（如iPhone模拟器，iPhone）

来源

2013-07-02 14:25:40 Meekohi

0

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

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

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

补充：当只是在做CSS互换移动我用这script并添加上面的例外它为fennec。

来源

2011-04-26 18:55:11

18

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

Firefox有这个能力为好，但不注册WebKit的CSS样式（我假设你会使用，因为它们为移动Safari浏览器和Android工作）。

你会遇到你的桌面浏览器和实际的移动浏览器之间的一些矛盾，但对于快速识别的风格和JavaScript调试它的工作就像一个魅力。

希望这会有所帮助。

来源

2011-04-26 19:00:09 davidnorman

+1

如何将Safari的UserAgent设置为iPhone？ – moleculezz 2011-08-02 11:31:11

+1

在工具栏中单击开发 - >用户代理，您可以选择多种不同的UA。 – davidnorman 2011-08-25 15:14:39

+0

我想这只是在Mac？因为我在windows版本的任何地方都没有这个选项。 – moleculezz 2011-08-26 12:30:14

1

我使用模拟器与我的osx系统代理设置发送请求到在Windows机器上运行的提琴手 - 这并没有帮助很多与JavaScript /内部的东西到移动Safari，但它至少告诉我什么是实际上通过网络让我拦截/记录/分析/调整事情，以确定什么可行，哪些不行。

来源

2011-10-24 01:29:35 ddedward

2

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

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

来源

2012-03-07 14:39:46 Anvaka

6

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

  • weinre
  • 的Adobe阴影
  • 对于Mac和iPhone：iWebInspector

来源

2012-03-22 21:07:41

7

  • iWebInspector iOS版的iOS中调试网页了不起的事情。

    iWebInspector screenshot

    更新：因为我张贴了这个答案，iOS和OS X更新了，现在的Safari在Mac上可以连接和调试移动Safari浏览器。

  • 结账Firebug Lite。

  • 适用于Android的Chrome，Remote Debugging还不错！

来源

2012-05-06 01:28:32

8

在Chrome中：

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

来源

2012-10-22 23:14:55

+3

有趣的信息.. +1 – boddhisattva 2013-01-04 11:17:47

+1

我猜测这个选项的前提是，既然Safari和Chrome使用WebKit，这个选项在Chrome上也会以某种方式提供。 这需要更加明显！ +1 – xiankai 2013-01-29 07:37:18

2

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

enter image description here

作品就像萤火虫

来源

2014-05-30 10:11:44 hawaiianchimp

3

有可以在手机上使用的精简版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：一个简单的JavaScript命令行工具：一个远程调试工具使用Socket.IO

  • jsConsole建。不过，它还提供了桥接到其他浏览器窗口的功能，可以远程控制和调试该窗口 - 完全可以在另一个浏览器或其他设备上。

来源

2015-06-09 08:31:45 davidcondrey

1

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

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

我觉得这是非常有帮助的，因为你可以看到从安装在设备上的不同浏览器的结果。

你可以使用这个链接查看更多细节

http://wiki.netbeans.org/MobileBrowsers

来源

2016-12-04 13:49:29

0

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

这是你可以在多个移动设备与点击调试平台。

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

你会看到一个Chrome开发者接口，但有可以使CSS adjustements（的改变将被连接的每一个设备）和Javsascript调试。

来源

2017-05-15 20:09:20

相关问题

 相关问题