Network

查看请求响应的详细信息及请求列表的Timeline，还有请求匹配到的规则(见Overview)。

界面操作的一些快捷键：

Ctrl + X(Mac用Command + X): 清空请求列
Ctrl + D(Mac用Command + D):
- 如果是焦点在下面的过滤输入框，可以清空输入框的内容
- 如果焦点在Network的其它地方，可以删除选中的请求项

更多功能及快捷键参考下图：

设置Network列表行样式：

pattern style://color=@fff&fontStyle=italic&bgColor=red

pattern参见匹配方式，更多模式请参考配置方式；style可以设置：

color: 字体颜色，跟css的color属性一致，但由于 # 为whistle但注释符号，这里可以用 @ 代替
fontStyle: 字体样式，可以设置为 normal、italic、oblique 等
bgColor: 对应列表行的背景颜色，具体设置同 color

例子：

www.test.com style://color=@fff&fontStyle=italic&bgColor=red

可以同时设置多个 style ，后面的会覆盖前面，如果先把前面的属性覆盖掉，可以用 style://color=。

设置自定义列的值

该功能需要 v2.9.35 及以上版本才支持，请及时更新 whistle

记得勾上 Custom1、Custom2

可以通过 Network 抓包列表右键菜单 / Open / Source 获取想要的 Data Key，如：req.headers.accept 获取请求头 accept 的值，res.headers.x-server 获取响应头 x-server 的值

通过插件自定义列

该功能需要 v2.9.36 及以上版本才支持，请及时更新 whistle

最新版本支持插件添加一个 Network 的自定义列，具体步骤如下：

在插件的 package.json 设置列的名称、列宽度（默认为 70px）、从抓包对象里面取值的 key（如：statusCode、req.headers.x-test 等等），是否显示 tips：

 {
     ...
     "whistleConfig": {
         "networkColumn": {
             "name": "RetCode",
             "width": 90,
             "showTips": true,
             "key": "customData.abc.ret"
         }
     },
     ...
 }

通过自定义 webWorker 自定义 customData

 {
     ...
     "whistleConfig": {
         "networkColumn": {
             "name": "RetCode",
             "width": 90,
             "showTips": true,
             "key": "customData.abc.ret"
         },
         "webWorker": "assets/webWorker.js"
     },
     ...
 }

代码示例：

 var URL_RE = /^https?:\/\/[^/?#]+.xxx.com\/fcgi\/common.fcgi\?/;

 module.exports = function(data, next) {
     data = URL_RE.test(data.url) && data.res.json;
     if (!data) {
         return;
     }
     var error = data.ret !== 0;
     var ret = data.ret + (error && data.msg ? '(' + data.msg + ')' : '');
     next({
         abc: { ret: ret }, // 对应上面的 dataKey： customData.abc.ret
         error: error, // 可选，是否显示错误样式
         style: error ? { // 可选，自动样式
             color: '#fff',
             fontStyle: 'italic',
             bgColor: 'red'
         } : undefined
     })
 };

效果：

Network

Network

设置自定义列的值

通过插件自定义列

results matching ""

No results matching ""