在做web服务的时候，使用谷歌浏览器开发工具调试监听前端代码、监听接口请求、分析请求响应结果是必不可少的。
一、如何打开谷歌开发工具
- 方式一：通过F12打开
- 方式二：右键页面，点击检查打开，如下图
二、开发工具介绍
如图所示，常用的四个模块。
二、Network面板介绍
如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要。
- 控制器：控制面板的外观与功能
- 过滤器：过滤请求列表中显示的资源
- 概览：显示HTTP请求、响应的时间轴。
- 请求列表：默认时间排序，可选择显示列。
- 概要：请求总数、总数据量、总花费时间等。
1、控制器
按照从左到右的顺序来介绍：
-
限流控制，可以不同的网络进行模拟请求。还可以自定义网络速度。
2、过滤器
如何对请求进行过滤呢？
（1）按字符串过滤
键入png到过滤文本框。仅显示包含文本的文件png。在这种情况下，与过滤器匹配的唯一文件是PNG图像。
（2）根据正则表达式过滤
比如类型/.*\.[cj]s+$/。过滤掉文件名不以a j或c后跟1个或多个s字符结尾文件。
（3）按类型
- XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other
- 按时间过滤：概览面板，拖动滚动条
- Hide data URLs：CSS图片等小文件以 BASE64 格式嵌入HTML中，以减少HTTP请求数。
（4）属性过滤
- domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
- has-response-header：显示包含指定HTTP响应标头的资源
- is：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
- Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
- method：显示通过指定 HTTP 方法类型检索的资源
- mime-type：显示指定 MIME 类型的资源
- mixed-content：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
- scheme：显示通过未保护HTTP（scheme:http）或受保护 HTTPS（scheme:https）检索的资源。
- set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
- set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
- set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
- status-code：仅显示 HTTP 状态代码与指定代码匹配的资源。
多属性间通过空格实现 AND 操作。
3、请求列表
简单介绍下每列的含义：
- Name：资源的名称
- Status：HTTP状态代码
- Type：请求的资源的MIME类型
- Initiator：发起请求的对象或进程。它可能有以下几种值：
- Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
- Redirect（重定向）：HTTP重定向启动了请求
- Script（脚本）：脚本启动了请求
- Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。
- Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
- Time：总持续时间，从请求的开始到接受响应中的最后一个字节
- Waterfall：各请求相关活动的直观分析图
我们还可以自定义添加其他列：鼠标右键单击，添加其他列
4、预览请求内容
如图所示，在请求列表点击以下
功能包括：
- 查看头部，包括请求头、响应头。
- 查看Cookie
- 预览响应正文：查看图像用
- 查看响应正文
- 时间详细分布
- 导出数据为HAR格式
- 查看未压缩的资源大小：Use Large Request Rows
- 浏览器加载时间（概览、概要、请求列表）DOMContentLoaded 事件的颜色设置为蓝色，而load事件设置为红色
- 将请求数据复制到剪贴板
- Copy Link Address：将请求的网址复制到剪贴板
- Copy Response：将响应包体复制到剪贴板
- Copy as cURL：以 cURL 命令形式复制请求
- Copy All as cURL：以一系列 cURL 命令形式复制所有请求
- Copy All as HAR：以 HAR 数据形式复制所有请求
- 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游。
5、请求时间详细分布
点击请求列表后，找到Timing，看到如图所示的字段
- Queueing：浏览器在以下情况下对请求排队
- 存在更高优先级的请求
- 此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1
- 浏览器正在短暂分配磁盘缓存中的空间
- Stalled：请求可能会因 Queueing 中描述的任何原因而停止
- DNS Lookup：浏览器正在解析请求额IP地址
- Proxy Negotiation：浏览器正在与代理服务器协商请求
- Request sent：正在发送请求
- ServiceWorker Preparation：浏览器正在启动Service Worker
- Request to ServiceWorker：正在将请求发送到Service Worker
- Waiting（TTFB）：浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte（至第一字节的时间）。此时间包括1次往返延迟时间及服务器准备响应所用的时间
- Content Download：浏览器正在接收响应
- Receiving Push：浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
- Reading Push：浏览器正在读取之前收到的本地数据
6、阻止请求
当某些资源不可用时，页面的外观和行为如何？它完全失败了，还是仍然有些功能？阻止要求查找：
(1)按Control+ Shift+P 打开命令菜单。
(2)键入block，选择“ 显示请求阻止”，然后按Enter。
（3）单击添加模式，添加类型main.css。
（4）单击添加。重新加载页面。正如预期的那样，页面的样式有点混乱，因为它的主样式表已被阻止。请注意main.css网络日志中的行。红色文本表示资源已被阻止。main.css已被封锁
（5）取消选中启用请求阻止复选框。
谷歌浏览器之http请求分析
原文：https://www.cnblogs.com/qtiger/p/14148868.html
记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。
清除按钮 清除当前的网络连接记录信息。
显示或者隐藏Filter面板。
保留或者清除之前的请求日志，跳转页面的时候勾选上，可以看到跳转前的请求，也可适用于chrome开发者工具抓包的问题
关闭或者开启缓存信息，关闭后可以达到即改即显效果，不受缓存的影响。