如何在Firefox浏览器中模拟移动设备和调试？

Question

我正在寻找一种工具，以移动设备模式显示我的网站。此外，我想用Firebug等工具调试我的网站......或者更好，我可以使用Firebug。 这样做的既定解决方案是什么？

Answer 1

您可以使用工具自带的浏览器（Firefox，IE，Chrome ...）来调试您的JavaScript。

至于调整大小，Firefox / Chrome有自己的资源可通过 Ctrl + Shift + I 或 F12 访问。转到“样式编辑器”选项卡，然后单击“自适应/响应式设计”图标。

旧Firefox版本

新的Firefox / Firebug

铬

*另一种方法是安装像“Web Developer”这样的插件

Answer 2

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

Answer 3

大多数Web应用程序都会根据HTTP标头检测移动设备。

如果您的网站还使用HTTP标头识别移动设备，则可以执行以下操作：

1. 将修改标题添加到Firefox浏览器中（ https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ ）
2. 使用插件修改标头：
   • 选择标题标签 - ＆gt;选择操作'添加'
   • 来模拟，例如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
   的标头
   • 点击“添加”按钮
3. 之后你应该可以看到手机了 您在Firefox中的Web应用程序版本并使用Firebug插件。

希望它有所帮助！

Answer 4

您可以使用Firefox插件User Agent Overrider。使用此附加组件，您可以使用您想要的任何用户代理，例如：

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

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

---

更新Nov＆＃39; 17：

由于Firefox 57的发布和网络扩展的引入，这个附加组件已经不再可用了。或者，您可以在配置中编辑Firefox首选项general.useragent.override：

1. 在地址栏中输入about:config
2. 搜索general.useragent.override
3. 如果首选项不存在，请右键单击about：config页面，单击New，然后选择String
4. 将新首选项命名为general.useragent.override
5. 将值设置为您想要的用户代理

Answer 5

我会使用工具下的“响应式设计视图” - ＆gt; Web开发人员 - ＆gt;响应式设计视图。它可以让你根据不同的屏幕尺寸测试你的CSS。

Answer 6

您可以使用已经提到的内置自适应设计模式（通过开发工具）来设置自定义屏幕尺寸以及Random Agent Spoofer插件来修改标头以模拟您使用的是移动设备，平板电脑等许多网站根据这些标识的标题指定其内容。

作为开发工具，您可以使用内置的开发人员工具（ Ctrl + Shift + I 或 Cmd + Shift + I for Mac）到目前为止与Chrome开发工具非常相似。