在PC上测试移动端网站和模拟手机浏览器的5大方法

在PC上测试移动端网站和模拟手机浏览器的5大方法

我查了很多资料，尝试了大部分方法。 这里我总结一下今天的努力，分享给大家，免得大家看那么多文章。 下面介绍的方法都是我亲自测试成功的方法。 测试环境为winxp。 。

1. *浏览器

模拟手机有四种方法。 原理是一样的。 通过伪装用户代理，浏览器被模拟为一个设备。 以下带星号的为推荐方法。

1.创建一个新的快捷方式

右键单击桌面上的浏览器图标，在弹出的右键菜单中选择“复制”，将该图标复制一份到桌面。 右键单击该副本，选择“属性”，打开相应的对话框，在“目标”文本框的字符后面添加以下语句：“--user-agent=""”，如下图：

注意user前面有两个“-”，“.exe”和“-user”之间有一个空格。 确认后，打开新创建的快捷方式，输入，然后浏览到与在手机上打开相同的页面。

此时可以创建新用户，不会影响原用户访问时也访问的移动版本。

2. 一次性模拟和手机

开始 – 在“运行”中输入以下命令以启动浏览器：

模拟谷歌：

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"

模拟苹果：

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"

该方法仅在特殊情况下使用，因为重启不会恢复正常的User-Agent，所以属于一次性使用。

更多user-agent请自行搜索。

3.安装插件

该插件可以轻松地在各种用户代理之间切换，非常方便，但可能会稍微影响性能。

用户代理地址：

从上图可以看到，类似的插件还有很多，但功能都差不多。

4：自带模拟器*

打开开发者工具，按F12（r32版本），然后找到右上角的齿轮按钮，打开设置面板，选择，勾选Show '' view in（在控制台视图中显示“仿真”）。

然后关闭设置面板，选择该面板（如果没有），找到右上角打开控制台面板，在控制台面板中选择该面板。 右侧有很多选项，选择一个然后点击即可。 Reset按钮可以将其恢复到默认状态。

打开模拟后打开，手机下会看到如下界面

此方法简单易用，且不需要重启。 推荐使用此方法。

注意：上面的第一种和第二种方法都需要关闭所有打开的窗口，然后再次打开它们才能起作用。

2. *浏览器

1.修改用户代理

安装插件和修改用户代理的方式与搜索、XHTML 和用户代理插件相同。

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

最近添加了响应式设计功能和 3D 视图，这真是太棒了。 打开自带的控制台（不是），找到右上角的响应式设计按钮。

打开后，您将切换到响应式设计界面。

但是我们看到打开QQ的网站并没有自动定向到QQ手机页面。 这只适用于响应式设计界面。 不适合像QQ那样云判断、返回不同页面。 这里我们必须配合上面的。 方法，然后更改user-agent即可实现类似的调试功能。

3.操作系统模拟器

安装方法请参考这里：%E6%A8%A1%E6%8B%9F%E5%99%A8#

安装完成后，可以打开如下界面。 您可以使用里面的浏览器打开网站。 不过这种方法打开的是电脑网站，不是手机网站。 也就是说，它的用户代理不是移动的，因此它不适合响应式界面。 功能上，它不适用于判断用户代理网站。 访问QQ、百度等都会返回电脑界面。

3. Opera* 浏览 1. 修改用户代理

和and类似，你可以自己安装插件。 从那时起，Opera 转而使用内核，这样就可以安装插件了。 您还可以在 Opera 商店中搜索插件。

用户代理下载：

2.歌剧+*

下载适合您的版本。 安装完成后，会打开如下界面：

左侧选择平台，右侧选择参数，选择后点击开始。 用过手机歌剧的朋友一定会熟悉下面的页面，那就是手机歌剧。

更详细的opera介绍请参考文末相关内容。

但此时，你仍然只能在模拟器中查看网站，而无法在模拟器中调试网站。 这里需要配合才能实现调试。 由于后来改了内核，所以无法安装。 所以你需要一个浏览器，以及一个离线包和配置。 之后，请参阅此处了解如何连接的详细信息。

一切设置完毕后，就可以在电脑上调试手机网页了，如下图：

歌剧下载地址：

4. 模拟器*

1.官方模拟器*

做开发的一定都知道模拟器。 这是官方提供的开发环境。 它可以模拟环境并进行版本之间的切换。 您可以下载配置好的环境，然后打开。 直接打开AVDM，戴上AVD。 ，然后启动，如下图：

模拟器将需要一段时间才能打开。 和环境一样，打开里面的浏览器测试一下就可以了。 但我的浏览器打不开。 我不知道为什么。 我很郁闷。

下载链接：

2.

这也是模拟器，大家可以自行搜索。 我安装后，我的电脑卡住了。 可能我的电脑配置不好，但是介绍的不错。

5. 在线测试

只能在线测试界面视觉效果，无法调试，但还是很不错的。

1.*

它非常好，速度快，界面简单，并且支持多个平台。

2.迷你歌剧

它需要Java环境支持，单一平台，Opera出品，速度非常快。

3.

说实话，我花了很长时间去研究它，但没有成功。 我感觉很鄙视，但是可以测试的平台很全面。

六、总结

上面列出了多种方法，每种方法都有自己的优点和缺点。 希望您能选择适合您的方法。 我推荐自带模拟器和opera+的方法。 因为这两种方法比较接近真实的移动环境，可以调试css和js。

当然，文章中没有提到的最好办法是你有一部手机，那就太好了。 配合远程调试是最理想的方式。