如何在 PC 机上测试移动端的网页?

如果用 HTML5 写的页面,想兼容 iOS、Android 平台的手机,在 PC 机上看有些效果可能不准确,但不可能在每个移动终端都放上去看下效果吧,一般用什么工具呢?模拟器?有没有更好的工具推荐? 我知道可以用 Opera 移动版,还可以用 Safari 修改 UA 成 iPad,Chrome也 中可以设置,你们都是这样测吗?
关注者
1382
被浏览
166246

40 个回答

腾讯这边有一款非常好的产品,可以测上线的网页在移动设备的兼容性。

云端有很多真机,通过网页可以操作真实手机。

选择一台:

进入测试:


目前这个对网速的要求比较高,高清模式的话,需要1M/s左右的网速,如果网速不够的话,可以切换到流畅模式,流畅模式的话画质不是很清晰,不过也能看。

这个真机的测试应该比模拟器更有优势,而且目前几乎就是免费试用。

wetest.qq.com/cloud/ind

大腾讯就是有钱

更新下答案,好像最新版的 chrome 本身已经支持 ADB 了,所以就不再需要安装那些插件啦~~


=======================================================================================

1. Chrome To Mobile

PC机上安装该chrome插件;在手机端安装chrome浏览器,登录chrome帐号, 启用“Chrome 转发至移动设备服务”; 在PC端上输入对应要调试的网址,然后点击发送到手机, 则会将该网址发送到手机端。免去了移动端上输入网址困难的烦恼。

注:ios chrome 与android chrome 都支持该功能

2-1. 调试—有线

Android chrome + Wndows/Mac OS

Android SDK

(1) 安装Android SDK

下载>解压>设置PATH为/platform-tools/

(2) 手机启用USB调试模式

设置>开发者>开启USB调试模式

(3) chrome启用USB网页调试

设置> 开发者工具 > 启用USB网页调试

(4)用USB线连接移动设备

(5)开启adb服务器

命令行进入sdk/platform-tools目录>输入

adb forwrad tcp: localabstract:chromedevetoolsremote

(6)访问localhost:

注:启动服务遇到错误的情况, 运行adb kill-server。 iOS Chrome不支持这种方式调试

ADB Plugin + MAC(2013-6-24更新)

今天偶然发现了这个方案, 有MAC的同学可以完全取代上面的使用SDK调试方法, 毕竟每次启动命令行挺麻烦的. 步骤如下: (1)下载 Chrome Canary

(2)下载 ADB Plugin 并安装在Chrome Canary上

(3) 开启手机 "USB调试模式"

注: 若手机已经开启过, 可以先关闭再开启, 避免手机没有记录下你机器的物理地址.

(4) 开启手机chrome USB网页调试

(5)点击ADB插件, 有惊喜.

iOS Safari + MAC

该方法只适用safari6.0+的版本。

(1) 手机进入偏好设置,点击safari,开启web检查器;

(2) Mac下进入safari的偏好设置,显示“开发”菜单;

(3) 手机链接Mac, 查看MAC Safari “开发”菜单,会有你的ios设备名的一行选项,这下面的子菜单就是你的ios safari上打开的网页

2-2. 调试—无线

weinre

该方案我这不介绍了,有兴趣的读者可以网上搜之。 因为我很讨厌这种调试方式, 一个是要引入额外通信脚本,IP一边,脚本地址又要变; 一个是速度慢得要死。 用过一次后, 就被我抛弃了。

MIHTool

该方法只适用于iOS系统, 具体用法就不多说了,直接点击标题链接吧, 方便,强大,易上手,移动端有Iphone和Ipad的, 我推荐直接用这个工具了。因为没有那么多繁琐的安装步骤。

3. HOST绑定

(1) PC和MAC开启代理服务器

Fiddler

Fiddler只有windows版,所以该方法只适合windows系统。

Fiddler>Tools>Fiddler Options>Connections

Nproxy

node编写;

安装简单: npm install nproxy -g

使用方便: nproxy

默认运行在8989端口, 加-p选项和端口号可以设置运行的端口

适用于win和mac, 同时也具备了fiddler的文件替换功能, 具体可以点击标题链接查看更详细的功能。

注: 该工具目前暂时无法代理手机端下的https请求, 已经反馈给作者,期待修复。

(2) 手机端设置代理

进入wifi设置, 选择手动输入代理服务器, 输入PC和MAC的IP及相关端口即可。 此时,手机使用的就是你桌面机器的hosts。

PS: Android上有个设置代理的应用,叫DroidProxy, 可以帮你保存设置过的代理地址,这样你就不用每次都再去输入代理地址了。 iOS大家可以补充下。

我的心得和总结

我自己使用的方案如下:

Chrome To Mobile(必备了,没什么选择)

调试上:

iOS设备上使用 MIHTOOL, 实在是方便。

Android机上只选择usb调试, weinre太恶心了,太恶心了= =!

hosts绑定上:

我选择的是nproxy, 一行命令就开启了代理, 且资源消耗小,另一方面,撸主有MAC- -!