57

我希望能够在计算机上以移动设备模式查看和调试我的网站。此外，我想使用 Firebug 之类的工具调试我的网站，或者……更好的是，我可以使用 Firebug。什么是既定的解决方案来做到这一点？

4

7 回答 7

48

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

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

旧 Firefox 版本

老火狐

新的火狐/萤火虫

火狐

铬合金

铬合金

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

于 2013-05-23T13:17:22.957 回答
27

使用Ctrl+ Shift+的响应式设计工具M。

于 2015-01-15T20:22:23.997 回答
16

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

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

  1. 将 Modify Headers 插件添加到您的 Firefox 浏览器 ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
  2. 使用插件修改标头：
    • 选择标题选项卡-> 选择操作“添加”
    • 模拟例如 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 插件。

希望能帮助到你！

于 2013-07-18T12:29:48.563 回答
12

您可以使用 Firefox 插件User Agent Overrider。有了这个插件，你可以使用任何你想要的用户代理，例如：

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

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

17 年 11 月更新：

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

  1. 在地址栏输入about:config
  2. 搜索general.useragent.override
  3. 如果首选项不存在，请右键单击 about:config 页面，单击新建，然后选择字符串
  4. 将新首选项命名为 general.useragent.override
  5. 将值设置为您想要的用户代理
于 2014-06-25T05:54:02.267 回答
6

我会使用工具-> Web 开发人员-> 响应式设计视图下可用的“响应式设计视图”。它可以让您针对不同的屏幕尺寸测试您的 CSS。

于 2014-09-02T17:07:32.550 回答
2

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

作为开发工具，您可以使用内置的开发工具（ Mac 的Ctrl++或Shift++ ），它们现在已经与 Chrome 开发工具非常相似。ICmdShiftI

于 2015-03-12T10:27:27.880 回答
1

我认为最好将 chrome 切换设备工具栏与 chrome 检查器一起使用。它为您提供用户代理开关以及响应模式。 在此处输入图像描述

于 2016-09-18T13:00:10.683 回答