一个典型的工作场景是：线上的某个页面出现了bugs，需要紧急修复。这时候有个简单的传统做法是，将问题页面另存为本地html文件，然后疯狂的寻找并修复bugs，等弄好了，再将修改后的js和css上传到线上并检查校验bugs是否已修正。上面的方法，对于简单页面，是够用的。但是对于稍微复杂的页面，IE的另存为经常不保真，如果页面中涉及Ajax等bugs，保存到本地更是难以调试。这时有个很自然的做法是，将开发环境Run起来，当时怎么开发的，现在就怎么调试。这样做肯定能解决问题，但要调动很多资源，后台开发工程师、前台开发工程师等等都要参与。对于小团队来说，也许是可行的，对于大团队来说，如此大动干戈，除非到了最后，是不会这样做的。那我们应该怎么做呢？先来看一个工具：Web开发中有个大名鼎鼎的工具：Fiddler. Fiddler是一个http调试代理，它能够记录你电脑和互联网之间的所有http通讯。Fiddler可以让你检查所有的http通讯，设置断点，以及Fiddle（Fiddle的英文意思是胡乱修改，很幽默的表达Fiddler的用途）所有“进出”的数据（指cookie,html,js,css等数据）。 嘿嘿，是否从上面的介绍中嗅探到了某种解决方案？Fiddler可以让我们Fiddle所有”进出“的数据！我们要调试线上页面的bugs时，可以先分析是什么文件引起的，找出这些嫌疑文件，下载到本地，然后利用Fiddler将线上的请求Fiddle到本地的对应文件。这样我们就可以随心所欲的修改这些嫌疑文件了，直接刷新线上的页面就可以看到效果，烦人的环境问题根本就不用考虑，而且一切都是高保真的。上面说的是思路，下面我会举个例子来说明。举例子之前，请先安装Fiddler（怎么下载安装就不多了，一路Next）。安装好后，在IE的工具条上会出现Fiddler2图标，点击启动Fiddler. 启动后，通过IE访问任何网站时，所有http进出数据都会在Fiddler上显示出来。但是等等，怎么老说IE呢？虽然在IE上能通过IE Developer Toolbar和Companion.JS来调试CSS和JS，但被firebug宠坏了的我们，总期望着Firefox上能搞定的问题绝不通过IE去调试。为了我们的美好期望，根据Fiddler的官方说明，我们只要简单的进行以下操作即可：首先将要调试的文件下载到本地，启动Fiddler，在AutoResponder栏勾选启用，并添加替换规则：如上图添加两条规则后，刷新页面，上面两个js文件就从本地获取了，嘿嘿。接下来，用喜欢的文本编辑器尽情的调试吧，就像当初开发时一样。等把bugs解决了，压缩并上传相应的js文件，并通知后台开发者修改vm中js文件的时间戳，然后等着发布就行。CSS也是一样的调试，不赘述。在firefox、Safari、Opera中的的使用方法类似，不多说。其它和前端开发调试密切相关的技巧：2.使用DIFF比较http包的统计数据；3.使用Filter过滤信息。比如禁用JS, 设置断点等等。4.使用bpu + Inspectors动态修改Response. 比如修改页面中的JS代码片段等等，非常有用。5.使用Request Buidler测试请求。可以很方便的测试ajax代码（可惜不支持断点）。6.使用Statistics + Timeline + neXpert查看性能等统计数据，可以分析网页加载慢的原因。7.使用CustomRules, 自定义配置和命令等。比如修改var m_DisableCaching: boolean = false的值为true, 就可以默认禁止缓存。还可以自定义命令等等。8.开发自己的扩展。

Fiddler是一个http调试代理，它能 够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。

Fiddler是最强大最好用的Web调试工具之一，它能记录所有客户端和服务器的http和https请求，允许你监视，设置断点，甚至修改输入输出数据，Fiddler包含了一个强大的基于事件脚本的子系统，并且能使用.net语言进行扩展。你对HTTP 协议越了解， 你就能越掌握Fiddler的使用方法。你越使用Fiddler，就越能帮助你了解HTTP协议。Fiddler无论对开发人员或者测试人员来说，都是非常有用的工具。

fiddler是一个很好的抓包工具，默认是抓http请求的，对于pc上的https请求，会提示网页不安全，这时候需要在浏览器上安装证书。

一、网页不安全

1.用fiddler抓包时候，打开百度网页： https://www.baidu.com

2.提示：网页不安全

二、fiddler设置(抓取所有https请求)

1.打开菜单栏：Tools>Fiddler Options>HTTPS

2.勾选Decrypt HTTPS traffic，里面的两个子菜单也一起勾选了

Fiddler抓包2-只抓APP的请求

fiddler抓手机app的请求，估计大部分都会，但是如何只抓来自app的请求呢？

把来自pc的请求过滤掉，因为请求太多，这样会找不到重要的信息了。

1.电脑上已装fiddler

2.手机和电脑在同一局域网

一、设置

1.fiddler>Tools>Fiddler Options>Connections 勾选Allow remote computers to connect。

2.记住这里的端口号：8888，后面会用到。

一、get请求 [图片上传中...(get请求.png-2ac7c-1529389857624-0)]

1.打开fiddler工具，然后浏览器输入博客首页地址： http://www.cnblogs.com/yoyoketang/

2.点开右侧Inspectors下的Headers区域，查看Request Headers

3.Request Headers区域里面的就是请求头信息，可以看到打开博客园首页的是get请求

四、get和post请求参数区别

1.关于get和post的功能上区别就不说了，大家自己查资料，这里主要从fiddler抓包的层面查看请求参数上的区别

2.get请求的Raw参数查看，主要分三部分：

--第1部分是请求url地址

--第2部分是host地址

--第3部分是请求头部信息header

Fiddler抓包4-工具介绍（request和response）

本篇简单的介绍下fiddler界面的几块区域，以及各自区域到底是干什么用的，以便于更好的掌握这个工具

一、工具简介

1.第一块区域是设置菜单，这个前面2篇都有介绍

2.第二块区域是一些快捷菜单，可以点下快捷功能键

3.第三块左边是抓捕的请求会话列表，每一个请求就是一个会话

4.第四块右边上方区域是request请求的详细信息，可以查看headerd、cookies、raw、json等

5.第五块右边下方区域就是response信息，可以查看服务端返回的json数据或其它信息

6.第六块区域左下角黑色的那块小地方，虽然很不起眼，容易被忽略掉，这地方是命令行模式，可以输入简单的指令如：cls，执行清屏的作用等

三、Request 和Response

1.Request是客户端发出去的数据，Response是服务端返回过来的数据，这两块区域功能差不多

No Authorization Header is present.

5.cookies:查看cookie详情

6.raw:查看一个完整请求的内容，可以直接复制

7.json:查看json数据

8.xml:查看xml文件的信息

四、decode解码

1.如果response的TextView区域出现乱码情况，可以直接点下方黄色区域解码

一、Composer简介

点开右侧Composer区域，可以看到如下界面，就是测试接口的界面了

二、模拟get请求

1.在Composer区域地址栏输入博客首页： http://www.cnblogs.com/yoyoketang/

2.选择get请求，点Execute执行，请求就可以发送成功啦

3.请求发送成功后，左边会话框会生成一个会话记录，可以查看抓包详情

4.右侧history区域会多一个历史请求记录

一、url详解

1.url就是我们平常打开百度在地址栏输入的： https:www.baidu.com ,如下图，这个是最简单的url地址，打开的是百度的主页

二、url解析

1.以" https://www.baidu.com/s?wd= 上海悠悠博客园"这个url请求的抓包为例

三、请求参数（params）

1.在url里面请求参数一般叫params，但是我们在fiddler抓包工具看到的参数是：QueryString

2.QueryString是像服务端提交的参数，其实跟params是一个意思，每个参数对应的都有name和value值

3.多个参数情况如下

一、body数据类型

常见的post提交数据类型有四种：

1.第一种：application/json：这是最常见的json格式，也是非常友好的深受小伙伴喜欢的一种，如下

{"input1":"xxx","input2":"ooo","remember":false}

2.第二种：application/x-www-form-urlencoded：浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数

input1=xxx&input2=ooo&remember=false

3.第三种：multipart/form-data:这一种是表单格式的，数据类型如下

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-dataname="text"

title

------WebKitFormBoundaryrGKCBY7qhFd3TrwA

Content-Disposition: form-dataname="file"filename="chrome.png"

Content-Type: image/png

PNG ... content of chrome.png ...

------WebKitFormBoundaryrGKCBY7qhFd3TrwA-

4.第四种：text/xml:这种直接传的xml格式

<methodcall>

<methodname>examples.getStateName</methodname>

<params>

<param>

<value><i4>41</i4></value>

</params>

</methodcall>

二、json格式

1.打开博客园的登录页面，输入账号密码后抓包，查看post提交数据，点开Raw查看整个请求的原始数据

三、x-www-form-urlencoded

1.登录博客园后，打开新随笔，随便写一个标题和一个正文后保存，抓包数据如下

四、WebFrom

1.为什么登录请求的WebFrom的body部分为空呢？

五、xml

1.如果遇到text/xml这种格式的body，那就如下图这样的了

一、断点

1.为什么要打断点呢？

比如一个购买的金额输入框，输入框前端做了限制100-1000，那么我们测试的时候，需要测试小于100的情况下。很显然前端只能输入大于100的。这是我们可以先抓到接口，修改请求参数，绕过前端，传一个小于100的数，检查服务端的功能是否OK。

也就是说接口测试其实是不需要管前端的，主要测后端的功能。Fiddler作为代理服务器的作用其实就相当于上面故事里面的小王，传纸条的作用，Fiddler(小王）修改了请求参数（小纸条），是为了验证服务端功能（女神C）。

2.Fiddler可以修改以下请求

--Fiddler设置断点，可以修改HTTP请求头信息，如修改Cookie，User-Agent等

--可以修改请求数据，突破表单限制，提交任意数字，如充值最大100,可以修改成10000

--拦截响应数据，修改响应体，如修改服务端返回的页面数据

二、断点的两种方式

1.before response：这个是打在request请求的时候，未到达服务器之前

--屌丝A传给小王的时候，小王在这个时候拦截了小纸条，未传给女神C

3.打完断点后，会发现所有的请求都无法发出去了，这时候，点下Go按钮，就能走下一步了

4.找到需要修改的请求后，选中该条会话，右侧打开WebFroms,这时候里面的参数都是可以修改的了

四、单个断点

已经知道了某个接口的请求地址，这时候只需要针对这一条请求打断点调试，在命令行中输入指令就可以了

请求前断点（before response)： bpu

4.取消断点，在命令行输入： bpu 回车就可以了

响应后断点（after requests）： bpafter

3.登录博客园，会发现已经拦截到登录后服务器返回的数据了，此时可以修改任意返回数据

4.取消断点，在命令行输入： bpafter 回车就可以了

五、拦截来自某个网站所有请求

1.在命令行输入：bpu www.cnblogs.com

2.打开博客园任意网页，发现都被拦截到了

3.打开博客园其他网站，其它网站可以正常请求

4.说明只拦截了来自部落论坛（ www.cnblogs.com ）的请求

5.清除输入bpu回车即可

六、命令行其它相关指令

Bpafter， Bps, bpv, bpm, bpu

这几个命令主要用于批量设置断点

Bpafter xxx: 中断 URL 包含指定字符的全部 session 响应

Bps xxx: 中断 HTTP 响应状态为指定字符的全部 session 响应

Bpv xxx: 中断指定请求方式的全部 session 响应

Bpm xxx: 中断指定请求方式的全部 session 响应 、、同于 bpv xxx

Bpu xxx:与bpafter类似

当这些命令没有加参数时，会清空所有设置了断点的HTTP请求。

更多的其他命令可以参考Fiddler官网手册

一、保存为文本

1.以博客园登录为例，抓到登录的请求会话

2.点左上角File>Save>Selected Sessions>as Text，保存到电脑上就是文本格式的

三、乱码问题（decode）

1.打开博客园首页： http://www.cnblogs.com/yoyoketang/ ，保存之后查看，会发现返回的是乱码

---