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

在进行网站分析的时候,我们经常需要对移动端的网站进行抓包分析等。这个时候就会遇到一个问题,有一些移动网站会在服务端或者网站内对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进行抓包的过程,俺已经实际操作测试过了,简单方便。强烈推荐:

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

参考资料:

网站分析的抓包分析(Fiddler2)

网站分析的过程中,我们经常要查看客户端(浏览器)与服务端(网站或GA服务器)通讯是否正常,甚至是对通讯内容进行审查,对我们部署的页面跟踪代码进行代码调试(Debug),在一般的情况下,我们使用简单工具就可以实现Google Analytics(Universal Analytics)代码调试。但是在一些特殊情况,我们需要使用到像Fiddler2这样的网络抓包工具,对网络数据包进行抓取,捕获其中的信息进行分析。

网络抓包及抓包工具

准确的是说,在网站分析中的抓包工具,是一个HTTP/HTTPS抓包工具。也就是说,上网设备与互联网的通过HTTP/HTTPS协议传输的数据,都可以被抓取出来,进行分析。其原理是打开软件时候,通过在上网设备与外部网络之间建立一个代理,所有的数据都由其通过,捕获这些数据并将内容格式化成为我们易于理解与分析的。

网站分析的抓包分析

网站分析的过程中,我们往往会遇到一些情况,我们无法直接使用Chrome开发者工具,Firefox Firebug之类抓取到页面请求数据,主要有:

  • 页面跳转/刷新时候的数据请求
  • 移动终端的代码调试(真机调试)

这两类的情况,无法简单通过单页面的工具进行分析。因此我们需要动用第三方抓包利器:Fiddler2!

Fiddler2基本介绍

在Fiddler2官方网站上称:Fiddler2是一个免费的支持任何浏览器、系统、平台的网络调试工具。在我看来,它是最好用的Web调试工具之一,我们可以使用它:

  • 捕获所有HTTP/HTTPS流量(Capture all HTTP(s) traffic)
  • 深入每次会话指标(Deep dive into session metrics)
  • 过滤捕获的流量(Filter captured traffic)
  • 对记录的流量存档或者回放(Archive and playback recorded traffic)
  • ……

Fiddler工作原理

fiddler

Fiddler是以Web代理的形式进行工作,打开软件后,上网设备与互联网的HTTP(s)通讯都将经由Fiddler,从而可以进行捕获、分析等操作。

使用Fiddler2查看Google Analytics数据请求

首先,我们到Fiddler2官方主页下载软件。

打开软件,我们可以看到界面:

fiddler2

然后,我们通过浏览器打开一个包含Google Analytics(Universal Analytics)跟踪代码的页面。此时,页面请求与响应数据都被Fiddler2所监控:

fiddler2-ga

这样我们就可以看到Google Analytics跟踪代码向GA服务器统计并且发出了一些什么数据了!

可能有朋友对上图的加载过程有疑问,为什么没有加载analytics.js这个统计文件呢?因为我之前访问过安装有GA代码的网站,这个文件已经在本地存储好了,当发出HTTP请求的时候,服务端就告诉我:哥们,你本地有一个analytics.js,不需要再下载了!

关于Fiddler2对HTTP数据抓包进行网站分析的方法就暂且写到这里,后续我还会写关于移动设备的抓包分析,跳转链接(跳转网站)的抓包分析等案例的分析思路与实际操作。

参考资料: