首页 > 编程语言 > 如何在电脑上测试手机网站(二)—— Firefox 篇
2014
11-11

如何在电脑上测试手机网站(二)—— Firefox 篇

1.修改user-agent

和chrome一样安装插件修改user-agent的方法(参考上一篇文章:如何在电脑上测试手机网站(一)—— Chrome 篇

1)下载firefox。点击菜单,工具-〉附加组件-〉获取附加组件。

645813a3ga24b02207d28&690&690

645813a3ga24b0276038d&690&690

2)查询安装三个组件:wmlbrowser、XHTML Mobile Profile以及User Agent Switcher

wmlbrowser、XHTML Mobile Profile是用来兼容解析WAP网页格式的组件。

User Agent Switcher是模拟User Agent(UA)的组件,就是让浏览器假装成手机UA头,访问手机网站时让丫发给你一个适配页面。
下图是安装好以后在 工具-〉附加组件-〉扩展 中查看的已安装组件。

645813a3ga24b0269b784&690&690

3)重启firefox

4)设置UA:在 工具-〉Default User Agent-〉User Agent Switcher-〉Options…-〉New ->New User Agent

填写一下Description和User Agent。主要是User Agent正确了就OK。

645813a3ga24b026d971e&690&690

645813a3ga24b024f0ead&690&690

645813a3ga24b029aa5db&690&690

5)选择需要模拟的UA

645813a3ga24b02d4878e&690&690

6)大功告成,可以用PC假装手机浏览手机页面了

645813a3ga24b02d86931&690&690

额外的:7)批量导入UA列表

这是fisio大大做的常用UA头列表。请猛击下载:常用UA头列表
工具-〉Default User Agent-〉User Agent Switcher-〉Options…-〉Import。导入即可。
当然,没事把UA头Export导出做做备份也是一个不错的习惯。

645813a3ga24b02f6f1f6&690&690

2.火狐响应式设计+修改user-agent

最近的火狐自己添加响应式设计功能和3D试图都很棒,打开火狐自己的控制台(非firebug),找到右上角的响应式设计按钮。

211724252668535

打开后即切换到响应式设计界面

211725319337270

但我们看到打开QQ的站点并未被自动引到QQ的移动页面,这样只对响应式设计的界面起作用,对想QQ这样云端判断,返回不同页面的并不适应,这里就要配合上面的方法,再改下user-agent,即可实现类似chrome的调试功能。

211727378946950

3.Firefox OS 模拟器

安装的方法 参考这里:https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8#Installing

安装完成后可打开如下界面,可用里面的浏览器打开网站即可,但这种方法打开的是电脑网站,而不是手机网站,也就是他的user-agent不是手机的,故对响应式界面起作用,对判断user-agent的网站不起作用,访问qq,baidu等返回的都是电脑界面。

211040586017332

编程技巧