经过多次查阅资料和尝试各种方法,我将这一天的努力总结并分享给大家。以下介绍的方法都是我在测试环境中(Windows XP)亲自测试成功的。这样一来,大家就不需要再去阅读那么多文章了。
一、Chrome浏览器模拟手机
有四种方法可以模拟Chrome浏览器为Android设备,原理相同,都是通过伪装User-Agent来实现的。以下标星的方法是推荐使用的。
1. 新建Chrome快捷方式
右键点击桌面上的Chrome浏览器图标,选择“复制”,然后将图标复制到桌面。接着右键点击该副本,选择“属性”,打开相应的对话框。在“目标”文本框的字符后面添加以下语句:“–user-agent=”Android”,如下图所示:
注意:user前面有两个“-”,并且“chrome.exe”与“–user”之间有一个空格。确认无误后,打开这个新建的Chrome快捷方式,输入3g.qq.com就可以浏览到类似手机端的页面了。
***还可以新建一个用户,这样就不会影响原来用户访问时看到的是手机版页面。
2. 一次性模拟iPhone和安卓手机
按下开始菜单中的“运行”按钮,输入以下命令启动浏览器:
模拟谷歌Android:
```
chrome.exe --user-agent=“Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1”
```
模拟苹果iPhone:
```
chrome.exe --user-agent=“Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10”
```
这种方法仅适用于特殊情况,因为重启Chrome后User-Agent将无法恢复到正常状态,所以是一次性的。如果需要更多的User-Agent,请自行搜索。
3. 安装插件
插件可以方便地切换各种User-Agent,非常实用。但需要注意的是,使用插件可能会对性能产生一定影响。
User-Agent Selector地址:https://chrome.google.com/webstore/detail/user-agent-selector/fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related
从上图可以看到,还有很多类似的插件,其实功能都大同小异。接下来,我们将介绍两种方法来实现类似Chrome的调试功能。
一、Chrome浏览器
1.自带模拟器
打开Chrome开发者工具,按F12(r32版本),然后找到右上角的齿轮按钮,打开设置面板,选择Overrides,勾选Show ‘Emulation’ view in console drawer(在控制台视图中显示“仿真”)。
关闭设置面板,选择Elements面板(非Console就可以),找到右上角打开控制台面板,选择控制台面板里的Emulation面板,右边有很多选项,选择一个点击Emulate就可以了,Reset按钮能恢复到默认状态。
打开仿真后,打开http://xw.qq.com,即可看到如下的手机下的界面。这种方法简单好用,而且不需要重启,推荐这种方法。注意:以上第一种和第二种方法都需要将全部打开的Chrome窗口关闭,再打开才能起作用。
二、Firefox浏览器
1.修改user-agent
和Chrome一样安装插件修改user-agent的方法,搜索wmlbrowser、XHTML Mobile Profile以及User Agent Switcher三个插件。
2.火狐响应式设计+修改user-agent
最近的Firefox自己添加了响应式设计功能和3D试图,非常棒。打开Firefox自己的控制台(非firebug),找到右上角的响应式设计按钮。打开后即切换到响应式设计界面。但我们看到打开QQ的站点并未被自动引到QQ的移动页面,这样只对响应式设计的界面起作用,对想QQ这样云端判断,返回不同页面的并不适应。这里就要配合上面的方法,再改下user-agent,即可实现类似Chrome的调试功能。
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,因此对响应式界面有效,但对判断user-agent的网站无效。访问qq、百度等网站时,返回的都是电脑界面。
三、Opera浏览器*浏览
1. 修改user-agent
与Chrome和Firefox类似,您可以自行安装插件。自Opera 12起,Opera改用Webkit内核,因此您可以安装Chrome的插件,也可以在Opera商店中搜索插件。User Agent Changer下载地址:https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en
2. Opera Mobile Emulator + Dragonfly*
下载适合您的版本,安装完成后会弹出如下界面:
左侧选择平台,右侧选择参数,选择完毕后点击启动。如果您使用过手机上的Opera浏览器,那么这个界面应该非常熟悉。这里就是手机版的Opera浏览器。
关于Opera Mobile Emulator的更详细介绍,请参阅文章末尾的参考资料。
**,此时您仍然只能查看网页,而无法调试模拟器中的网站。为此,您需要借助Dragonfly来实现调试。由于Opera 12更换了内核,您不能直接安装Dragonfly。因此,您需要一款Opera 12的浏览器以及Dragonfly的离线包。具体的连接方式请参阅这里:http://www.opera.com/dragonfly/documentation/remote/
全部设置好后,您就可以在电脑上调试手机网页了。Opera Mobile Emulator下载地址:http://www.opera.com/zh-cn/developer/mobile-emulator
四、模拟器*
1. 官方模拟器*
如果您是从事安卓开发的开发者,那么肯定都知道谷歌官方提供的安卓模拟器。它可以模拟安卓环境,并支持切换各个版本。您可以下载并配置好环境,然后在Eclipse中直接打开AVDM。创建一个AVD后,点击start即可打开模拟器。请注意,这可能需要一段时间。模拟器会像安卓环境一样启动,打开其中的浏览器进行测试即可。但我的浏览器似乎无法打开,这让我感到非常郁闷。
在本文中,我们将探讨如何在Android应用程序的测试过程中使用模拟器。首先,我们需要下载模拟器。您可以在此处找到各种模拟器的下载地址:http://developer.android.com/sdk/index.html 。接下来,我们将介绍一些常用的模拟器。
1. Mobile Emulator*
Mobile Emulator是一款非常不错的模拟器,速度很快,界面简洁,支持多种平台。您可以在此处找到它的详细信息和下载地址:http://emulator.mobilewebsitesubmit.com/ 。
2. opera mini simulator
Opera Mini Simulator是一款由 Opera 公司出品的模拟器,需要 Java 环境支持。它运行速度很快,但仅限于单一平台。您可以在此处找到更多信息和下载地址:http://www.opera.com/zh-cn/developer/opera-mini-simulator 。
3. webpage mobile
Webpage Mobile 是另一款可以进行网页测试的模拟器,虽然可能不容易配置,但它可以测试的平台非常全面。您可以在此处了解更多信息和下载地址:http://www.webpagetest.org/mobile 。
除了上述提到的模拟器之外,还有一种**方法:使用您的手机进行测试。如果您拥有一部手机,并配合远程调试功能,这将是最理想的测试方法。当然,这也意味着您需要确保手机与计算机连接正常,以便进行调试。
***在Android应用程序测试过程中,有多种模拟器可供选择。每种方法都有其优缺点,因此建议您根据自己的需求选择合适的模拟器。在此推荐 Chrome 自带模拟器和 Opera Mobile Emulator + Dragonfly 的方法,因为它们能够更接近真实手机环境并允许调试 CSS 和 JavaScript 代码。