人们如何在移动设备上调试网站？
我想能够像在桌面浏览器中使用检查器一样操作HTML和CSS，并调试JavaScript。
如何在移动设备上调试网站？
85
- Crashalot
4
4自 iOS 6 开始，远程调试功能已经可用：https://dev59.com/u2025IYBdhLWcg3wHSCn#12762449 - Blaine
1可能是移动网站调试的重复问题。 - givanse
1这里的答案已经非常过时了。现在，Android、iOS和Windows Phone都可以通过电缆将手机连接到计算机，并使用计算机上的开发工具来检查和修改手机上的页面。我会尽力添加一个答案。 - Mark Amery
请查看此博客以获取有关Linux的信息：https://linuxhint.com/debugging_android_websites_apps_linux/ - Art
16个回答
23
这是正确的答案，不知道为什么Blaine只留下了评论！
iOS 6 版本之后提供了远程调试功能：https://dev59.com/u2025IYBdhLWcg3wHSCn#12762449
在 OS X 上，您可以在 iOS 模拟器和 iOS 6 设备上使用 Safari 网页检查器。
- 首先，在您的桌面版 Safari 中启用开发者菜单。
接下来，开启您的 iOS 设备（或模拟器）的远程调试功能。
设置 > Safari > 高级 > Web 检查器（开启）
回到电脑上的 Safari，点击开发者菜单，然后选择您的设备（例如 iPhone 模拟器、iPhone）
- Meekohi
21
使用Google Chrome for Android Beta，你现在可以使用桌面版 Google Chrome 内置的开发者工具进行远程调试。这里是一个演示如何操作的视频。
- dlannoye
19
我最近在开发一款移动网站时遇到了同样的问题。我找到的最佳解决方案是使用Safari浏览器的UserAgent设置为iPhone（请确保启用了Safari的开发人员工具）。你需要检测用户是否来自移动设备，然后将其重定向到您的移动URL或加载移动专用样式表，因为这种方法无法设置CSS媒体类型。
Firefox也具有此功能，但不会注册webkit CSS样式（我假设您将使用它们，因为它们适用于Mobile Safari和Android）。
您将遇到一些桌面浏览器和实际移动浏览器之间的不一致性，但对于快速识别样式和JavaScript调试，它像魔法一样奏效。
希望这可以帮到你。
- davidnorman
5
1如何将Safari的UserAgent设置为iPhone？ - moleculezz
1在工具栏中点击“开发者”->“用户代理”，您可以选择大量不同的UA。 - davidnorman
我猜那只有在 Mac 上才有？因为在 Windows 版本中我找不到那个选项。 - moleculezz
@moleculezz 你需要前往“设置”>“高级”，并勾选“在菜单栏中显示开发人员”（或类似文本）。如果菜单栏本身被隐藏了（对我来说默认是这样的），请按Alt键。 - jinglesthula
请不要仅仅使用 -webkit- 前缀，因为 Android 上也有非 WebKit 浏览器，而且其他平台也可能出现。更好的方法是在构建过程中自动添加前缀。 - Vincent
9
在Chrome中：
设置 -> 工具 -> 开发者工具 -> 设置（右下角）-> 用户代理（在选项卡菜单中）-> "覆盖用户代理"
- Chris
1
1我偶然发现了这个选项，因为Safari和Chrome都使用WebKit，所以我认为这个选项在Chrome上也应该以某种方式可用。这需要更加显眼！+1 - xiankai
7
iWebInspector是用于在iOS中调试网页的绝佳工具。
更新：自本回答发布以来，iOS和OS X已经更新了，现在你的Mac上的Safari可以连接和调试Mobile Safari。
看看Firebug Lite。
对于Android Chrome，远程调试也不错！
- Alan H.
6
有几种方法可以在移动设备上调试DOM和JS。使用Adobe Shadow还可以检查localStorage。
- weinre
- Adobe Shadow
- 针对Mac和iPhone：iWebInspector
- Jörg Vanderhoeven
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');
你可以使用这个第二个书签来在安卓设备上显示控制台日志。
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命令行工具。但它还提供了跨越到其他浏览器窗口的能力，以远程控制和调试该窗口-无论是在另一个浏览器中还是在另一个设备上。
- davidcondrey
2
打开附带Xcode的iOS模拟器，然后打开Safari，在“开发”菜单中应该会看到这个选项。
就像Firebug一样工作。
就像Firebug一样工作。- seantomburke
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接