Skip to main content

Network 深入

问题

Network 和我们每天的工作息息相关,但是你真的了解它吗?

1. 隐藏 network overview

Network 面板,通常我们不太关心时间轴的信息,那么 Overview 就可以隐藏起来啦!

2. Request initiator 显示调用堆栈信息

Network 面板中的 initiator 这一列告诉我们是脚本的哪一行触发了当前请求。(通常显示的是,调用堆栈中触发请求的那一步。)

如果你用的是一个本地化的 fetch API, 那它将会指向一些低层级的类库的代码 - 例如 当我们在 Angular 配合使用 Axios 或者 zone.js 的时候,这时指向的是 xhr.js

除了这些外部库之外,如果你想看到代码的哪一部分触发了请求:

将鼠标悬停在显示的 initiator (例如 外部库)上,就可以看到完整的调用堆栈,包括文件:

3. 自定义请求表

在请求表中,可以看到有关每个请求的几条信息,例如: StatusTypeInitiatorSizeTime 。但是我们同样可以添加更多自己想看到的信息(例如 我经常添加 Method )。:

敲黑板

Network 面板里展示出来那些信息,都可以添加到这里。

要自定义显示哪些列,右键单击请求表标题上的任意位置。

请注意

Response Headers 是一个有更多选项的完整的子菜单,你甚至可以定义选项!