Fiddler实现把抓包结果导出到html报告中
之前写了一篇文章关于如何把Fiddler抓包的结果保存到html报告中，具体可以参考文章
一文带大家了解如何在Fiddler中生成html测试报告_fiddler导出测试报告-CSDN博客
报告整体效果如下所示
很显然这个报告的易读性是较差的，最近我把这个报告展示进行了优化，在这里把实现思路和具体的代码实现分享给大家。
实现思路
1.利用css处理报告样式，重点是表格在实线显示并把URL列进行文字换行处理
2.利用js把Overall_Elapsed列中超过不同时间段的值标记为不同颜色，便于发现问题
3.把上面的css和js文件，拷贝到_index.htm同目录中，编辑_index.htm文件并引入上面的css和js文件，如下：
<html><head><style>body,thead,td,a,p{font-family:verdana,sans-serif;font-size: 10px;}</style>
<link rel="stylesheet" type="text/css" href="your.css"/><script src="your.js"></script>
</head>
如果大家不了解如何在fiddler中添加Overall_Elapsed列，可以参考文章：
特别有用！配置Overall_Elapsed后，大大提升您使用fiddler的工作效率！_overall elapsed-CSDN博客
另外大家可以添加Comments列来了解具体接口对应的业务场景
巧用Fiddler中的Comments提升接口测试效率-CSDN博客
CSS核心代码
/*设置相邻表格单元格的边框合并为一个单一的边框*/
table{
border-collapse: collapse;
}
/*设置表格边框线条粗细和颜色*/
tr,td,th{
border: 1px solid black;
}
/*设置标题背景为浅灰色*/
th{
background-color: lightgrey;
}
/*设置URL列，可以换行显示，列宽度为300px*/
td:nth-child(6){
width:300px;
word-wrap: break-word;
word-break: break-all;
}
/*设置Caching列，可以换行显示，列宽度为300px*/
td:nth-child(8){
width:150px;
word-wrap: break-word;
word-break: break-all;
}JS核心代码
// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取所有的tbody中的tr元素
var trElements = document.querySelectorAll('tbody tr');
// 遍历每个tr元素
trElements.forEach(function(tr) {
// 获取最后一个td元素Overall_Elapsed
var lastTd = tr.querySelector('td:last-child');
// 获取td的文本内容
var elapsedTime = lastTd.textContent.trim();
// 将时间字符串转换为毫秒（假设格式为"0:00:00.xxx"或"0:00:xx.xxx"）
var timeParts = elapsedTime.split(':');
var milliseconds = (parseInt(timeParts[0], 10) * 3600000) + // 小时转毫秒
(parseInt(timeParts[1], 10) * 60000) + // 分钟转毫秒
(parseInt(timeParts[2], 10) * 1000) // 秒转毫秒
if (milliseconds>=1000&&milliseconds<3000) {
//响应时间大于等于1s，小于3s，整行背景标黄色
var row = lastTd.parentNode;
row.style.backgroundColor = "yellow";
}
if (milliseconds>=3000) {
//响应时间大于等于3s，整行背景标红色
var row = lastTd.parentNode;
row.style.backgroundColor = "red";
}
});
});备注：这里的js脚本对html中列的处理，是按照fiddler默认的导出排序进行的，如果大家有自己的导出模版，可以参考上面的代码自行修改！
实现效果
由于本人对前端不是很熟悉，这些代码也是现学现卖，虽然生成的报告不是很美观，但是确实解决了实际问题！
我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！
标签：Fiddler,word,内附,tr,break,源码,var,td From： https://blog.csdn.net/liwenxiang629/article/details/144612386