这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

Network 也是开发中非常常用的一个面板，这个面板的信息非常丰富。但对于刚入行的小白来说，可能还不太会用这个面板，也不知道其中包含了什么有价值的信息。作为过来人，下面把一些常用的功能和信息点说一下，希望能给小白们一点点帮助~

Network 总览

overview

请求过滤

过滤器提供了类型过滤，可以帮助我们快速筛选请求类型。此外，还支持自定义查询，接受字符串或正则表达式。 chrome 还提供了一套常用的查询条件，在输入框中输入 - 即可看到所有支持的过滤条件。

筛选 GET 请求：method:GET。

另：多条件查询使用 / 进行拼接：method:GET / status-code:200

请求表

自定义请求表

在请求列表中，我们可以看到 name、status、type、initiator 等信息，如果需要显示其他信息，可以在表头处右键，即可看到其他可选信息。像 method 比较常用的信息就可以开放出来方便查阅。

排序

在右键中我们看到有“sort by” 的排序选项，其实还有种快捷方式的：点击表头指定字段，即可指定为按该字段排序。

重新发送请求

对于 XHR 类型的请求，可以直接右键重新发送。

网络条件

有时候可能需要模拟不同的网络环境、设备进行测试，可以在 network condition 中进行配置。