经常有人说抓包抓包,很极客的感觉,其实就是利用工具分析网络请求和响应而已。用工具,谁不会呢?对吧。恰好有个QA同学曾问我,怎么模拟出这种情况,怎么模拟出那种情况,等写完就把博客链接发给她好了。
本文介绍的工具是 Fiddler,它能够在本机和服务端之间建立一个代理,通过这个代理,可以对所有经过的请求和响应进行拦截、修改、分析等。理论上说,只要你使用的软件支持代理,都可以用 Fiddler 进行拦截,包括浏览器、命令行等。
类似的软件有很多,比如 WireShark、HttpWatch 等,如果只是模拟发请求的话,Chrome 中有几个插件也很不错,比如 Postman、REST Client 等。
基本术语
会话(Session)
不同于服务端的 Session,这里仅仅指一次HTTP请求而已。会话面板在工具左侧,如下图所示。
图中显示了三条请求,每一列的具体含义都很清晰,认识英文单词就能懂了。
只是左边 # 号下的图标,帮各位找了一下,见下图。
默认情况下,一旦开启 Fiddler,就会走它的代理。有时候你想暂停这种行为,那请看到左下方有个状态栏。
单击一下左边的 Capturing,就能停止拦截,想再开启,就再单击一下。
它的右边是会话的来源,可以设置仅仅拦截浏览器发出的请求。
再右边有三种选择:1、在请求发出之前进行断点;2、在响应回来的时候进行断点;3、不设断点。
审查(Inspector)
随便单击一条会话,右侧就会显示详细信息。
题外话,我觉得教程的意义在于,当你对某种新事物不熟悉的时候,帮助你了解一下而已。tutorial 和 reference 之间是有点区别的。
所以这里就挑一些足够使用的 tab 来解释一下。首先,这里有上下两栏,上面是 Request,下面是 Response。
Request 中有三个比较厉害的:
Inspectors:选中之后,可以详细查看请求的 Headers、Cookies,并且可以对请求体格式化,以 WebForms、JSON、Raw 等方式查看。具体每种方式的区别可以自己感受一下。一般来说,想要查看请求的参数的话,WebForms 的方式就挺直观的。
AutoResponder:这个地方可以模拟服务端返回值。顾名思义,当浏览器发出的请求满足你设置的匹配条件的话,Fiddler 就自动响应了,并不需要走网络。
Composer:模拟向服务端发送请求,用于测试服务端接口是否正确。
Response 中常用也列三个吧:
Headers:响应头。比如 Content-Type、Access-Control-Allow-Origin 等这些属性都在这个 tab 展示。
Cookies:查看由服务端带回来的 cookie。
JSON:将返回的内容以 JSON 格式显示。这个很有用,特别是当服务端返回的内容本身就是 JSON 的时候。
QuickExec
抱歉这么快就要讲命令行,实在是因为它太有用了。它位于状态栏的上方,有个 QuickExec 的提示,非常显眼。
其实,当你看到它的时候,就已经会了第一个命令
help
输入 help
会带你到命令行的帮助页,上面列举了所有可用的命令。不是很多,而且都很直观。这里同样把常用的列一下。
?sometext
:高亮包含匹配文字的会话。比如?/foo
就可以把所有包含 /foo 的请求都找出来。
其他的高亮功能还有:=(匹配请求方法或状态码)、@(匹配host)、select(匹配MIME)。
clear
:清空会话面板。keeponly
:清空会话面板,仅保留指定的MIME类型。比如keeponly json
就能筛选出所有返回 json 的会话。go
:放行所有的断点。
设置断点
按照之前介绍的,在状态栏启用断点(无论是请求断点,还是响应断点)后,所有的请求都会中断。
事实上,一个网页加载时,会触发很多异步请求。甚至在加载完成后,也还会不停地发送异步请求,比如现在很流行的二维码登录页面。拦截所有请求似乎显得不太合适。
而在上一节其实留了断点的命令行没有介绍。断点即 breakpoint,所有跟断点相关的都是以 bp 为前缀。
bpu
:请求时断点,比如bpu /foo
bpafter
:响应时断点,比如bpafter /foo
bps
:拦截状态码,比如bps 404
bpm
:拦截方法,比如bpm post
用不带参数的命令可以清除断点,比如 bpafter
可以清除所有的响应断点。
url 的匹配方式是判断“字符串是否包含”,比如 bpu /foo
会拦截所有包含 /foo 的请求。
如果忘了这些命令,在命令行输入 bp ,敲回车,就能看到提示了。bp is short for breakpoint,这个能记住吗?
模拟返回值
想要模拟返回值,首先要设置响应断点。
bpafter /foo
当满足条件的响应回来时,选中该会话,就可以看到如图所示的面板。选择 Raw 视图(其他也可以,Raw 可以修改更多的内容),然后可以清楚地看到,服务端返回的内容是
{name: 'Jarvis', gender: 'M'}
把上面的 M 修改成 F,然后单击“Run to Completion”,就能把修改后的返回值送还给浏览器了。
自动化呢?没错,人往往喜欢偷懒,如果每次要修改,岂不是很麻烦。
选中想要拦截的请求,比如 /api/foo
然后在 Request 面板选择 AutoResponder
再选择 “Add Rule”
在最下面的下拉框选择 “Create New Response...”
然后 “Save”
此时会弹出一个对话框,跟 Response 面板的布局一样,在上面可以编辑返回值。
或者你直接把定义好的返回内容保存成文件,在刚才那个下拉框中选择该文件就行了。
模拟请求
右侧的 Composer 窗口可以模拟发送请求。
刚打开这个窗口的时候,应该是一片空白。你可以从左侧会话列表拖一个会话过去,这样就有预填的信息了,修改一下参数,点“Execute”,piu,一条请求就发送出去了。
接着在会话列表就可以查看服务端的返回值。
小结
其实 Fiddler 的官方文档上已经写得很全了,我只是稍微结合了平时的使用经验,仅仅把常用的功能罗列一下,希望可以帮助各位更快上手。毕竟,磨刀不误砍柴工。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。