前言

浏览器开发者模式是我们在开发网站时常用的工具。但按下F12，无数的参数让人迷离。本文主要描述一些我在学习开发者模式的network选项卡时的一些心得体会，供新手朋友参考，若新手朋友感觉还是有点看不懂，可以先了解一下http原理，这里推荐《HTTP权威指南完整版》http://www.notedeep.com/note/36/page/280。

一、开发者模式网络选项的工作原理

当打开开发者模式的面板，它便开始记录浏览器于服务器之间的所有HTTP请求。后将其处理分类等操作，以便技术人员分析。

二、页面介绍

1.停止记录HTTP请求按钮

此标为红色说明开发者模式（DevTools）正在记录浏览器和服务器之间的通信，灰色则不记录。

2.清除所记录的HTTP请求按钮

点击此处可清除所记录的HTTP请求

3.过滤器按钮

可以根据字段，筛选出自己想看的记录

筛选方法，这里借用谷歌官方文档

4.保存所有请求按钮和不使用cache按钮

Preserve log按钮：不清除记录。默认情况，当你点击页面上的链接，DevTools会清除现在所记录的所有HTTP请求，并开始新一次的记录。但有时候我们需要保存一些记录，方便我们对比统计分析。我们就可以选中此框，它将不会在清除已经记录下的HTTP请求。
Disable cache：让浏览器不再使用缓存。我们知道，当我们加载重复的资源时，浏览器会保存曾经加载过的资源。但如果我们做类似负载均衡等实验，我们希望不停的直接从服务器端直接获取资源，我们可以选中此框，以让我们可以在每次请求同一资源时，都和我们第一次请求资源时，保持一致的情况。

4.记录到的HTTP请求

以下我们以加载baidu为例，我们知道，完成一项事务（比如打开www.baidu.com)，会发布一系列HTTP事务来获取一个丰富图片的web页面。DevTools会记录下所有这一事务所传输的HTTP请求。包含HTTP的请求名字、状态、类型、启动者、大小、载入所用的时间、和瀑布（用以描述该请求，在整个页面加载中的顺序、各种时间等，后面会详谈）

1.status（状态）

即服务器返回的此资源请求状态码，状态码的具体含义可搜索HTTP状态码

2.Type（类型）

即MIME TYPE，用于告知浏览器此资源类型的字段，有如下类型供参考。

3.initiator（启动器）

即此HTTP请求由谁发起。可能前面你已经想到，你打开baidu.com只是一个HTTP请求，那么剩下那么多请求是怎么样来的呢？此字段就记录这个问题。

能发起请求的有哪些？

解析器：浏览器的HTML解析器
重定向：服务器返回的重定向资源
脚本：如JavaScript函数

其他：其他一些过程和操作。如你在地址导航或地址栏下输入baidu.com的操作。

4.Size(大小)

即此HTTP响应的总大小

5.时间

从请求开始到响应中最后一个字节接收的总持续时间。

6.瀑布

每个请求活动的可视细分

在查看timing你可能会遇到以下字段

Queueing. ：排队状态，有下面几种情况，浏览器会让需要请求的资源进入queueing状态
- 有更高优先级的请求。
- 已为该来源打开了六个TCP连接，这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。（这是谷歌浏览器的数据，各个浏览器是不一样的，感兴趣可自学查询）
- 浏览器正在磁盘缓存中短暂分配空间
Stalled. 停止状态，可能由于Queueing描述的任何原因而停止。
DNS Lookup. 浏览器正在解析请求的IP地址。
Initial connection. 浏览器正在建立连接，包括TCP握手/重试和协商SSL。
Proxy negotiation. 浏览器正在与代理服务器协商请求。
Request sent. 正在发送请求。
ServiceWorker Preparation. 浏览器正在启动服务程序。
Request to ServiceWorker. T该请求正在发送给服务人员。

Waiting (TTFB). 浏览器正在等待响应的第一个字节。TTFB代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。为方便大家理解，附上为HTTP一次响应的时间轴。Waiting (TTFB)则表示Request后收到Response包的第一个字节所用的时间，此时间为客户机到服务器之间的网络时延*2+服务器处理请求的时间

TTFB值建议在200ms以下，它反应服务器和主机之间的网络状况，以及服务器应用的响应速度。

Content Download. 浏览器正在接收响应。

也称为传输时间，如果蓝色占据waterfall很大比例，在服务端可以考虑减少字节传输量，以及考虑带宽的短板处。

Receiving Push. 浏览器正在通过HTTP / 2服务器推送接收此响应的数据。
Reading Push. 浏览器正在读取先前接收的本地数据。

总结

参考文章：

https://developers.google.com/web/tools/chrome-devtools/network/reference?utm_source=devtools#timing-explanation
https://www.cnblogs.com/kjcy8/p/6802203.html

谷歌浏览器开发者模式network选项相关推荐

完美解决谷歌浏览器开发者模式提示框
完美解决谷歌浏览器开发者模式提示框开发者模式提示框解决方法开发者模式提示框作为一名前端开发人员,免不了要打开浏览器的开发者模式,安装各种各样的扩展程序,但是安装后,浏览器每打开一次,都会弹出一 ...
学习笔记：谷歌浏览器开发者模式的使用
前言没接触后台开发前,一直觉得浏览器的开发者模式就多就是看看网页的源代码.后来在实践中发现,它还有很多好用的地方.好笔记不如烂笔头,还是老老实实记录一波.鉴于目前接触得还比较少,本文将会持续更新. ...
谷歌浏览器开发模式network界面时间段隐藏
在开发者模式下 ,标识部分点击下,就可隐藏时间段或者新版本的浏览器去掉Show overview 选项
谷歌浏览器开发者模式只显示请求而不显示静态资源
按F12打开开发者模式先选中NetWork 再选中XHR
谷歌浏览器开发者模式下打不开页面
今天调试,发现开发者模式不管是刷新还是怎么搞,甚至重装都不管用,最后发现问题了这里的使用应该是网络,要选择快速3G,如果是离线,和节流模式就会打不开网页.
谷歌浏览器开发者模式抓包，界面跳转无法解析的解决办法
不得不说,jmeter真的很强大,不仅什么协议都支持,可以做接口测试性能测试还可以操作数据库. 这里使用jmeter来设置浏览器代理,进行操作录制和抓包,随后分析步骤如下 1.打开jmeter 2. ...
chrome谷歌浏览器开发者模式禁用缓存的设置方法
开发时建议关闭chrome的缓存[Disable cache(while DevTools open)] 问题:修改了css,JS后,chrome看不到效果
谷歌浏览器开发者模式,屏幕类型选择
第一步:按F12 第二步: 随后edit,选择自己需要的机器类型.
chrome谷歌浏览器如何关闭自动开启的开发者模式
自动打开关闭开发者模式 1.关闭自动开发者模式 1.1对谷歌浏览器快捷方式右键打开属性 1.2如图目标栏里增加 --args --disable-web-security --user-data-di ...

谷歌浏览器开发者模式network选项

前言