- Published on
17-Network 深入
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
💡
问题 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
是一个有更多选项的完整的子菜单,你甚至可以定义选项!

Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021