前端调试告别笨办法

  笔者前一阵在作微信站项目的时候在调试的过程当中遇到了很多的问题，每次调试接口的时候都须要用console.log将数据打印出来，若是有时候想要修改接口数据还很不方便。针对上面调试的痛点，笔者对Fiddler的用法进行了简单的学习，分享一下学习的心得。

介绍

  首先来介绍一下Fiddler。Fiddler是位于客户端和服务器端的HTTP代理，也是目前最经常使用的http抓包工具之一 。 它可以记录客户端和服务器之间的全部HTTP请求，能够针对特定的HTTP请求，分析请求数据、设置断点、调试web应用、修改请求的数据，甚至能够修改服务器返回的数据，功能很是强大，是web调试的利器。

  是的，你没有看错，Fiddler这货竟然还能设置断点。不只如此，Fiddler还能修改请求数据或者修改返回数据。这样在调试的时候能够随意的将服务器的返回数据修改为咱们想要的数据了。除此以外，Fiddler还可以拦截手机端的数据，可以看到手机端发送的请求和请求结果，不过要进行一个小小的设置。好了，介绍了这么多，来看一下Fiddler的原理：

  既然Fiddler是客户端和服务器端之间的代理，那么客户端全部发起的请求都会通过Fiddler，而后再发送到对应的服务器；一样，服务器全部的响应数据也会通过Fiddler再发送到客户端。

界面

  安装完Fiddler，打开界面以下,整个界面能够分为五个部分：

1. 最上面的红色区域是菜单栏，主要有保存/导入请求、自定义规则、设置选项等功能。
2. 中间的蓝色区域是工具栏，针对当前请求的操做，包括清除请求、恢复断点、查找请求。
3. 左侧是请求数据的面板，全部Fiddler捕获到的请求都会在这个面板里，每个字段的含义以下图所示。
4. 右侧是数据统计的面板，咱们能够在这边看到每一个请求的详细统计数据（包括请求头、响应头、响应主体、请求时间），还能够设置过滤条件，把咱们须要的请求过滤出来。
5. 命令行输入QuickExec能够输入命令进行一些快捷操做。

配置

  Fiddler简单介绍完了，下面来看下Fiddler的一些配置。

电脑设置代理

  Fiddler打开后会自动更改IE的代理设置，因为Chrome默认代理设置是跟IE关联在一块儿的，所以Chrome不用进行配置，可是火狐使用独立的代理设置，所以须要单独配置。

  首先查看Fiddler的监听端口。在Fiddler中选择Tools => Fiddler Options => connections，打开以下界面：

  其中的Fiddler Listens on port就是Fiddler的监听端口，咱们只要代理到这个端口就能够用Fiddler进行监听了。而后把Allow remote computers to connect这一行前面的勾打上，容许其余电脑来链接。

  Firefox手动设置以下，打开工具 => 选项 => 高级 => 网络 => 设置，而后进行以下设置。

  不过上面的手动设置比较麻烦，咱们能够安装一个FiddlerHook插件，安装好后启用这个插件就行。

手机端设置代理

  Fiddler不只可以代理电脑的请求，也可以代理手机端的请求，当咱们开发微信站或者手机站的时候，就能够很方便咱们来进行调试。

IOS设置

  IOS选择对应的无线网设置，而后找到HTTP代理，服务器一栏填写电脑的IP地址，端口号是Fiddler端口号，默认8888。

Android设置

  在Android中，长按所链接的无线网，而后修改网络，在代理的选项卡里选择手动。一样，服务器一栏填写电脑的IP地址，端口号默认8888.

捕获HTTPS

  默认状况下，Fiddler不会捕获HTTPS会话，所以若是不开启HTTPS捕获的话自动应答器是不会替换HTTPS的会话。打开Tools => Fiddler Options => HTTPS

  弹出框须要安装一个证书，而后全程点Yes就能够了。

功能

统计结果

  Fiddler的统计选项卡中显示了当前Session的基本信息，在选项卡的最上方显示的是文本信息，最下方是个饼图，按MIME类型显示流量。使用Statistics页签，用户能够经过选择多个会话来得来这几个会话的总的信息统计，好比多个请求和传输的字节数。

  选择第一个请求和最后一个请求，可得到整个页面加载所消耗的整体时间。从条形图表中还能够分别出哪些请求耗时最多，从而对页面的访问进行访问速度优化。

查看请求头和响应结果

  在左侧请求数据列表中选中一条记录会自动切换到Insprctors面板，这个面板分为上下两个，上面是请求头的一些信息，下面是返回的响应主体。

自动应答器

  在平常工做中，有时候脚本样式或者页面有点问题是屡见不鲜，常常须要对文件进行修改。可是每次都须要发布到测试环境才能看到效果很麻烦，咱们但愿在本身本机就能看到调试的效果。Fiddler就提供了自动应答器这个功能，能让咱们直接看到效果。   打开AutoResponder面板，咱们能够添加URL匹配规则，让请求的URL从本地返回文件而不是从服务器。   例如如今须要将线上地址https://acexyf.github.io/替换为本地的一个HTML文件，首先勾选Enable rules使全部的匹配规则生效，而后勾选Unmatched request passthrough，让没有匹配到的规则经过（若是不勾选这个，打开其余网页会失败）。   而后点Add rules来新增一个匹配规则，在x下面的Rule Editor输入要替换的URL和本地文件的路径，而后Save就添加成功了。

  虽然这样添加匹配成功了，可是产生了一个心得问题，因为是匹配URL，因此只要是URL中带有https://acexyf.github.io/都会被替换掉，因此该域名下全部的脚本、样式以及子页面都会被替换，这样显然不利于咱们调试。可是Fiddler提供了另外的四种匹配规则。

1. 前缀为“EXACT:”表示彻底匹配（大小写敏感）
2. 前缀为“NOT:”表示发现就不匹配
3. 前缀为“REGEX:”表示使用正则表达式匹配
4. 前缀为“REGEX:(?insx)”表示匹配方式其中：

• i表示不区分大小写；
• n表示指定的惟一有效的捕获是显式命名或编号的形式；
• s表示单行模式；
• x表示空格说明的；

  所以修改一下咱们的匹配规则，改成EXACT:https://acexyf.github.io/就能够了。还有一个小Tips：

• 将左侧的会话列表中选择一条数据，直接拖拽到AutoResponder面板会直接生成匹配规则。
• 点击Rule Editor的第二个输入框旁边的小三角找到Find a file能够选择文件路径。
• Test...能够测试匹配规则。
• 在匹配规则上右击会有选项框，你惊不惊喜，意不意外。

构造器

  构造器composer用来建立一个HTTP请求而后发送到服务器。能够本身定义一个请求，也能够讲会话列表中拖拽一个已有的请求过来。

Parsed请求

  打开Composer面板，第一个就是Parsed选项卡，在表单中咱们输入一个HTTP请求，好比对baidu.com发送一个请求。点击Execute按钮，这个请求就发送出去了。这时候在会话列表中就多了一次请求。

Raw请求

  第二个选项卡是Raw，也是原始请求，若是熟悉HTTP请求，能够直接手动输入。

ScratchPad暂存

  第三个选项卡是ScratchPad，能够同时保存多条原始请求，而后选择性的发送。高亮选中你要发送的请求，而后点击Execute就发送出去了。

Options选项

  几个选项说明：

• Inspector Session：使用同一个 Session 进行链接（同一个域名或者主机的状况下）
• Fix Content-Length Header： 当你发送 Post 请求时，自动加上或者修正 Header 中的 Content-Length.
• Follow Redirect：自动根踪 HTTP 状态码为 301 和 302 中返回带 Location 的请求。
• Automatically Authenticate：自动进行身份验证。
• Tear Off：将 Composer 变成一个浮动窗口。

过滤器

  有时候请求刷新一个页面会有不少的请求，看得眼花缭乱，可是绝大多数请求可能并非咱们想要的，这时候咱们就须要对请求进行一些过滤。

  在Zone Filter中有三个选项，分别过滤如下请求：

• No Zone Filter：不过滤
• Show only Intranet Hosts：仅显示内网的请求
• Show only Internet Hosts：仅显示外网的请求

  在Host Filter中有四个选项，分别过滤如下请求

• No Host Filter：不过滤
• Hide the following Hosts：隐藏下面的主机
• Show only the following Hosts：仅显示下面的主机
• Flag the following Hosts：标记下面的主机

命令行输入

  命令行QuickExec容许咱们快速的执行一些脚本命令。

select命令

  select命令用来选择全部类型为指定类型的HTTP请求，即根据请求的content-type来选择全部同一类型的。经常使用的select css选择全部的样式请求，select image选择全部的图片请求。

allbut命令

  allbut命令用于清除除了指定类型以外的其余HTTP请求，仅保留指定类型。例如allbut image仅保留图片的请求。若是跟一个不存在的类型，执行效果和csl，命令相同，清除全部的请求。

?text命令

  当你在问号后输入一些文本的时候，Fiddler会高亮URL中带有这些文本的全部请求。

>size和<size命令

  大于号小于号命令选择响应主体的大小大于（或者小于）指定大小。

=status和=method命令

  等号命令用于选择状态码等于指定状态码或者指定请求方法的会话。

@host命令

  选择包含指定HOST的所有请求。

bold命令

  若是之后的请求的URL中带有指定的字符串，那么将会被加粗显示。bold /bar.aspx表示加粗URL带有bar.aspx。再次执行bold会清除加粗。

bpafter（bpu）、bps、、bpv（bpm）

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

• bpafter和bpu: 中断URL包含指定字符的所有会话
• bps: 中断响应状态为指定字符的所有会话
• bpv和bpm: 中断指定请求方式的所有会话

cls命令

  清除请求列表。

断点调试

  虽然bpafter和bpu都是用于中断URL包含指定字符的所有会话，可是打断点的时间是不同的。bpu是在浏览器发送请求的时候进行断点，能够对请求参数进行修改；而bpafter是在服务器响应的后进行断点，能够对响应结果进行修改。   咱们使用用express模拟简单的ajax请求。

var express = require('express');
var path = require('path');
var app = express();
var port = process.env.PORT || 8088;

app.get('/test',function(req,res){
	var params = req.param('name') || '';
	res.json({name:'request name is '+params});
});

var server=app.listen(port,function(){
	console.log('server is listening on port:'+port);
});
复制代码

修改请求参数bpu

  咱们输入命令 bpu /test，而后Fiddler就会进入等待。在浏览器中输入网址，这时候浏览器就会进入等待的状态。在会话列表中选择进入断点状态的请求，而后修改请求参数，修改完后点击Run to Completion结束断点。这时候，浏览器页面也结束等待，出现修改后的结果。

  调试完后咱们不须要Fiddler再进行断点，能够输入bpu清除全部bpu的断点。

修改响应结果bpafter

  一样，咱们输入命令 bpafter /test，而后Fiddler就会进入等待。在浏览器中输入网址，这时候浏览器就会进入等待的状态。在会话列表中选择进入断点状态的请求，而后修改响应结果，修改完后点击Run to Completion结束断点。这时候，浏览器页面也结束等待，出现修改后的结果。

调试完后咱们不须要Fiddler再进行断点，能够输入bpafter清除全部bpafter的断点。

总结

  笔者会不按期更新更多心得，若是以为写得还不错，请关注个人掘金主页。更多文章请访问个人博客地址