fiddler展示接口的响应时间

最近项目组迁移了一个新项目，想对比迁移前后访问菜单的响应时间是否有变化，因为没需求文档，所以只有靠fiddler一个个的抓接口来看，开发经理想要看具体每个接口耗时，虽然点击接口，在页面上也能看到接口响应时间，但是效率比较低且不方便对比。所以想到可以直接在请求时增加一列显示接口响应时间。

1.直接点击接口查看接口响应时间

如下：

2.新增一列展示接口响应时间

在fiddler里使用快捷键Ctrl+R 或者 菜单->Rules->Customize Rules…
搜索：class Handlers
在类里增加以下方法：

	// 显示每行请求的服务端耗时时间
	public static BindUIColumn("Time Taken", 80)
	function CalcTimingCol(oS: Session){  
		var sResult = "0";                  
		if ((oS.Timers.ServerDoneResponse > oS.Timers.ClientDoneRequest)) {  
			sResult = (oS.Timers.ServerDoneResponse - oS.Timers.ClientDoneRequest).TotalMilliseconds.ToString("N0");
		}  
		return sResult + "ms";  
	}  

保存，重新打开fiddler 就能看到每个请求的耗时了。单位毫秒

3.汇总多个接口响应数据

首先点击第一个接口，按住shift键，再点击最后一个接口，
此时从第一个到最后一个接口都被选中

此时再点击Statistics可以看接口的汇总情况

4.Timeline里直观的查看响应时间瀑布图

如图，点击Timeline可以查看选中的接口的响应时间
可以直接点击一个接口查看一个；
也可先查看多个：
1.选择第一个接口，再按住shift点击最后一个接口。会选择第一个到最后一个所有的数据
2.选择第一个接口，再按住ctrl点击第二个接口。会同时选中两个接口。

这个图示有3种表达方式，不同的颜色也代表不同的请求。比如条形图的颜色由响应的 MIME 类型决定;图像为浅绿色，JavaScript 为深绿色，CSS 为紫色，其他为蓝色。感觉这种比较适合做汇报的时候用，具体的可以查看官方文档：
timeline官方文档

也可以看看关于fiddler其他使用技巧：
fiddler基础配置