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
	})
};

效果：

3.5 KiB Raw Permalink Blame History Unescape Escape

Network

设置自定义列的值

通过插件自定义列

3.5 KiB

Raw Permalink Blame History