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

Question

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

我希望能够操作HTML和CSS类似于在桌面浏览器中使用Inspector,并调试JavaScript.

Answer 1

借助Google Chrome for Android Beta,您现在可以使用桌面版Google Chrome中内置的开发人员工具进行远程调试.这是一段视频,展示了它的工作原理.

Answer 2

这是正确的答案,不确定为什么布莱恩只留下它作为评论!

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

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

1. 首先在桌面上的Safari中启用Developer菜单.

2. 接下来,在iOS设备(或模拟器)上启用远程调试.

   设置> Safari>高级> Web检查器(ON)

3. 在计算机上返回Safari,单击开发人员菜单,然后选择您的设备(例如iPhone模拟器,iPhone)

Answer 3

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

Firefox也具有此功能,但不会注册webkit css样式(我假设您将使用它们,因为它们适用于Mobile Safari和Android).

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

希望这可以帮助.

Answer 4

在Chrome中:

设置 - >工具 - >开发人员工具 - >设置(右侧站点底部) - >用户代理(在选项卡菜单中) - >"覆盖用户代理"

Answer 5

• 适用于iOS的iWebInspector对于调试iOS中的网页真是太棒了.

  

  更新:自从我发布此答案后,iOS和OS X已更新,现在Mac上的Safari可以连接并调试Mobile Safari.

• 查看Firebug Lite.

• 对于Android上的Chrome,远程调试也不错!

Answer 6

有几种方法可以在移动设备上调试DOM和JS.使用Adobe Shadow,您还可以检查localStorage.

• weinre
• Adobe Shadow
• 对于Mac和iPhone:iWebInspector