作为一名前端工程师，在日常工作中，对谷歌开发者工具的使用是必不可少的。

今天想重点谈谈谷歌开发者工具-网络（network)这一项能力。（其他类似的网络抓包工具，下个系列文章再谈）

起因是这样的，在定位一个登录问题时，想要知道在跳转到登录页面之前发生了什么，所以深入研究了下这个工具。 不得不说，真的是一个宝藏工具。

主要从以下四个部分来介绍吧。

一、记录网络请求

要跨页面加载保存请求，需要选择选中“网络”面板上的“保留日志 / Preserve log”复选框

本次使用到的就是(preserve log)，通过开启保持日志，这个Tab所有的请求都会持续记录；在页面跳转到登录页面之前的记录也保存在请求列表中，很方便的观察到在跳转前发生了什么。（我们这边主要是接口返回了约定的登陆命令）

另外通过开启（capture screenshots)；还可以清晰的看到用户在不同的时间点看到什么样的界面，以及对应的网络资源请求状态；

二、重放网路请求

选择请求并按R 或者 右键单击该请求并选择Replay XHR

三、更改加载行为

清除浏览器缓存和cookie

方式一

方式二

四、禁止/过滤/排序某个请求

禁止某个域名的请求

输入过滤（支持invert反向） / 类型过滤

点击即可排序

五、分析请求

这里可以查看单个请求的详情

六、导出请求

希望大家都能充分利用好谷歌开发者好帮手，更多参考 developer.chrome.com/docs/devtoo…