移动网站的调试及抓包分析

在进行网站分析的时候,我们经常需要对移动端的网站进行抓包分析等。这个时候就会遇到一个问题,有一些移动网站会在服务端或者网站内对PC浏览器进行处理,当用户从PC访问网站的时候,会自动跳转到PC版本,只有当从移动终端访问移动端网站的时候才会到移动端版本。另一方面,使用PC浏览器访问移动端网站,我们无论是进行Google Analytics代码调试,还是其他代码的Debug,都不能完全替代移动终端实测,毕竟移动端本身、移动端浏览器都可能与PC端存在设计上的差异。

在PC上调试移动网站

什么是User Agent?

User Agent(用户代理)是指的是代表使用者行为的软件(软件代理程序)所提供的对自己的一个标识符。绝大多数网页浏览器使用的 User-Agent 值如下:

Mozilla/[version] ([system and browser information]) [platform] ([platform details]) [extensions]

例如,iPad 上的 Safari 使用的就是下述:

Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405

调试原理

我们这里所说的“在PC端调试移动网站”是对移动端网站的网络数据请求包进行抓包分析。调试原理是通过在PC端浏览器上,模拟移动终端的User Agent访问网站以达到“逼真”的访问效果,然后再进行其他的网站调试。

使用User Agent Switcher模拟移动端访问

为了达到上述效果,我们可以使用Firefox中的User Agent Switcher附加组件。在Firefox中安装完这个附加组件,我们可以轻松的使用Firefox模拟iPhone等去访问移动终端网站,然后就对网站进行后续的抓包分析了。

user agent switcher

PS:Chrome下也有对应的User-Agent Switcher for Chrome

在移动终端实测调试

实测调试的原理

使用移动终端实测网络进行抓包分析的原理是:移动设备与PC共处于一个网络(如通过Wifi),在PC端设置代理及端口,移动设备设置好对应的代理,再让移动设备通过PC端的代理访问网络。在PC端对这个代理的网络数据进行捕获,最终达到我们需要的抓包数据。

使用Fidder2进行移动终端抓包分析

这里有一篇非常好的文章,详细地讲解了使用Fidder对iPhone进行抓包的过程,俺已经实际操作测试过了,简单方便。强烈推荐:

通过以上的这些方式,我们就可以对移动网站进行代码调试以及抓包分析了。

参考资料: