Network

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

Network

界面操作的一些快捷键:

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

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

Network

设置Network列表行样式:

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

pattern参见匹配模式,更多模式请参考配置方式;style可以设置:

  1. color: 字体颜色,跟css的color属性一致,但由于 # 为whistle但注释符号,这里可以用 @ 代替
  2. fontStyle: 字体样式,可以设置为 normalitalicoblique
  3. bgColor: 对应列表行的背景颜色,具体设置同 color

例子:

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

效果

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

设置自定义列的值

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

修改列名

记得勾上 Custom1Custom2

效果

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

通过插件自定义列

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

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

  1. 在插件的 package.json 设置列的名称、列宽度(默认为 70px)、从抓包对象里面取值的 key(如:statusCodereq.headers.x-test 等等),是否显示 tips:

     {
         ...
         "whistleConfig": {
             "networkColumn": {
                 "name": "RetCode",
                 "width": 90,
                 "showTips": true,
                 "key": "customData.abc.ret"
             }
         },
         ...
     }
    
  2. 通过自定义 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
         })
     };
    

    效果:

    image

results matching ""

    No results matching ""