如何模拟移动设备并在Firefox浏览器中进行debugging?

我正在寻找一个工具,显示我的网站在移动设备模式。 此外,我想debugging我的网站与像Firebug的工具或…甚至更好,我可以使用Firebug。 什么是一个既定的解决scheme呢?

您可以使用工具自己的浏览器(Firefox,IE,Chrome …)来debugging您的JavaScript。

至于resize,Firefox / Chrome有自己的资源通过Ctrl + Shift + IF12访问 。 去标签“风格编辑器”,并点击“自适应/响应式devise”图标。

旧的Firefox版本

旧的Firefox

新的Firefox / Firebug

火狐

铬

*另一种方法是安装一个像“Web开发人员”

使用Ctrl + Shift + M使用自适应devise工具。

大多数Web应用程序都基于HTTP头来检测移动设备。

如果您的网站也使用HTTP头来识别移动设备,则可以执行以下操作:

  1. 添加修改头插入到您的Firefox浏览器( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/
  2. 使用插件修改标题:
    • selectHeaders选项卡 – >selectAction'ADD'
    • 以模拟例如iPhone添加名为User-Agent和值的头: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
    • 点击“添加”button
  3. 之后,您应该能够在Firefox中看到您的Web应用程序的移动版本,并使用Firebug插件。

希望能帮助到你!

您可以使用Firefox附加组件User Agent Overrider 。 有了这个插件,你可以使用任何你想要的用户代理,例如:

 Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0 

如果您的网站通过用户代理检测到移动设备,那么您可以通过这种方式testing您的布局。


17年11月更新:

由于Firefox 57的发布以及networking扩展的引入,这个插件可悲的是不再可用。 或者,您可以在您的configuration中编辑Firefox首选项general.useragent.override

  1. 在地址栏inputabout:config
  2. searchgeneral.useragent.override
  3. 如果首选项不存在,请右键单击about:config页面,单击New,然后selectString
  4. 命名新的首选项general.useragent.override
  5. 将值设置为所需的用户代理

我将使用工具 – > Web开发人员 – >响应式devise视图下的“响应式devise视图”。 它会让你testing你的CSS不同的屏幕尺寸。

您可以使用已经提到的内置的响应式devise模式 (通过开发工具)设置自定义的屏幕大小,与随机代理欺骗插件修改您的头模拟您正在使用手机,平板电脑等。许多网站指定其内容根据这些确定的标题。

作为开发工具,您可以使用内置的开发工具(用于Mac的Ctrl + Shift + ICmd + Shift + I ),现在已经变得非常类似于Chrome开发工具。

我认为最好在铬检查器上使用铬切换设备工具栏。 它为您提供了一个用户代理开关以及响应模式。 在这里输入图像说明