Network 深入
问题
Network
和我们每天的工作息息相关,但是你真的了解它吗?
1. 隐藏 network overview
Network
面板,通常我们不太关心时间轴的信息,那么 Overview
就可以隐藏起来啦!
2. Request initiator 显示调用堆栈信息
Network
面板中的 initiator
这一列告诉我们是脚本的哪一行触发了当前请求。(通常显示的是,调用堆栈中触发请求的那一步。)
如果你用的是一个本地化的 fetch
API, 那它将会指向一些低层级的类库的代码 - 例如 当我们在 Angular
配合使用 Axios
或者 zone.js
的时候,这时指向的是 xhr.js
除了这些外部库之外,如果你想看到代码的哪一部分触发了请求:
将鼠标悬停在显示的 initiator
(例如 外部库)上,就可以看到完整的调用堆栈,包括文件:
3. 自定义请求表
在请求表中,可以看到有关每个请求的几条信息,例如: Status
, Type
, Initiator
, Size
和 Time
。但是我们同样可以添加更多自己想看到的信息(例如 我经常添加 Method
)。:
敲黑板
Network
面板里展示出来那些信息,都可以添加到这里。
要自定义显示哪些列,右键单击请求表标题上的任意位置。
请注意
Response Headers
是一个有更多选项的完整的子菜单,你甚至可以定义选项!