浏览器都自带一个开发者工具，该工具可用来抓包，很受开发人员喜欢。浏览器开发者工具的受众范围比Fiddler的广，因为它很方便，不需要做什么设置。下面我们用Chrome浏览器来进行讲解。
5.2.1 调出开发者工具
调研开发者工具的方式有以下几种。
方式1：按F12调出（很多人把这个工具叫作F12）。
方式2：在浏览器中，单击鼠标右键，然后选择“检查”。
方式3：在浏览器中，按快捷键Ctrl+Shift+I。
5.2.2 用Chrome测试网页加载时间
使用Chrome的开发者工具测试网页加载时间的操作步骤如下。
（1）打开Chrome浏览器，然后打开开发者工具，选中Network选项卡。
（2）访问一个网址，比如访问http://www.cnblogs.com/tankxiao，开发者工具能捕获所有的HTTP请求，如图5-2所示。
图5-2 网页加载时间
从图5-2中可以看出单个请求的响应时间，可以看到这个网页发送了49个请求。总的网页响应时间是682毫秒，性能非常好。
5.2.3 用Chrome捕获12306登录的POST请求
Chrome开发者工具在抓包时，如果页面发生了跳转，那么会把上一个页面的HTTP请求清空。此时需要选中Preserve log，以保留上次抓到的包。
我们用Chrome来捕获12306的登录请求，该登录请求用的是POST。具体步骤如下。
（1）在登录页面中输入用户名和密码，选中图片验证码后，单击“登录”按钮。
（2）在开发者工具中可以看到登录时发送的一系列请求。
（3）选中HTTP请求，在Headers选项卡中能看到该请求中的用户名和密码，如图5-3所示。
图5-3 抓12306登录的包
5.2.4 用Chrome测试接口的响应时间
如图5-4所示，Chrome中会显示每个请求的响应时间。
图5-4 单个请求的响应时间
5.2.5 过滤请求
因为可以操作的界面较小，查找HTTP请求不方便，所以一般都需要用到过滤功能。
Chrome开发者工具具有强大的过滤功能，可以让用户根据关键字来过滤，如图5-5所示。
图5-5 根据关键字过滤
在Filter输入框中输入method:POST，可以过滤POST方法的HTTP请求，如图5-6所示。
图5-6 根据HTTP方法过滤
转自：https://zhuanlan.zhihu.com/p/333229693