79

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

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

4

17 回答 17

23

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

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

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

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

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

    设置 > Safari > 高级 > Web Inspector (ON)

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

于 2013-07-02T14:25:40.983 回答
19

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

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

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

希望这可以帮助。

于 2011-04-26T19:00:09.267 回答
19

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

于 2012-02-08T17:10:07.937 回答
9

在 Chrome 中：

设置 -> 工具 -> 开发人员工具 -> 设置（站点右下角） -> 用户代理（在选项卡菜单中）-> “覆盖用户代理”

于 2012-10-22T23:14:55.593 回答
7

  • iOS 版iWebInspector非常适合在 iOS 中调试网页。

    iWebInspector 截图

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

  • 查看Firebug Lite。

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

于 2012-05-06T01:28:32.203 回答
6

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

  • 温热
  • Adobe 阴影
  • 对于 Mac 和 iPhone：iWebInspector
于 2012-03-22T21:07:41.017 回答
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 : 使用 Socket.IO 构建的远程调试实用程序

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

于 2015-06-09T08:31:45.917 回答
2

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

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

于 2012-03-07T14:39:46.920 回答
2

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

在此处输入图像描述

像萤火虫一样工作

于 2014-05-30T10:11:44.473 回答
1

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

于 2011-10-24T01:29:35.817 回答
1

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

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

于 2012-09-20T00:23:26.837 回答
1

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

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

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

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

http://wiki.netbeans.org/MobileBrowsers

于 2016-12-04T13:49:29.567 回答
1

由于 Firebug Lite 停止工作，我已经切换到Eruda，它提供了一个控制台、一个 DOM 浏览器和一些更多功能。您可以使用小书签将其注入任何页面。

Eruda 的用户界面截图。 标签栏显示在顶部，链接到

于 2020-10-09T12:53:55.220 回答
0

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

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

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

补充：当只是为移动设备进行 css 交换时，我使用这个脚本并为 fennec 添加上述异常。

于 2011-04-26T18:55:11.343 回答
0

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

于 2014-04-27T16:32:02.097 回答
0

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

它是一个平台，您可以一键在多个移动设备上进行调试。

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

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

于 2017-05-15T20:09:20.893 回答
0

所有的答案都有帮助。

如果您需要访问移动浏览器上的控制台日志以进行调试，您可以使用类似OutFrontJS的东西。它是一个 npm 包，可将您的控制台记录到 DOM。

于 2021-06-10T11:56:13.380 回答