最近项目组迁移了一个新项目,想对比迁移前后访问菜单的响应时间是否有变化,因为没需求文档,所以只有靠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基础配置