谷歌浏览器开发者模式解读

一般在windows系统上浏览器开发者工具打开都是按F12快捷键，按F12快捷键打开谷歌浏览器如下图所示，下面来分别解释一下各个功能

一、第一个功能：定位的作用，点击一下这个图标，将鼠标放在任意页面上的位置，就可以查看到右边的源码

二、第二个功能：是用于屏幕适配的，也就是说谷歌浏览器可以模拟各个型号的手机打开wap页面，如果需要增加手机型号，点击下拉菜单的Edit

打开如下图增加手机型号页面，如增加小米Mix3，填写完后点击save按扭

这样就增加了小米Mix3型号了

三、第三个功能，Elements：查看页面的HTML元素，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等，并且手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈；

四、第四个功能，console：这个就是一个web控制台，记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell；

五、第五个功能，sources：这个是显示资源文件的，并且可以断点调试JS；

（1）上图中第一个红框，是用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件；
（2）上图中第二个红框，是用来调试js代码的地方，当我们需要调试程序的时候打一个断电，然后通过上图红框3这个工具栏进行调试，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过上图红框4来查看程序中变量的值什么的；
（3）上图中第三个红框，第一个按扭是停止状态的按钮就是表示程序是否停止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。

1、 如果要搜索某个文件，用Ctrl+P，就能快速搜索到需要的文件

2、要搜索源码，快捷键是：Ctrl + Shift + F

3、快捷键Ctrl + G，输入行号，会跳转到你输入的行号所在的行

4、当编辑一个文件的时候，你可以按住Ctrl在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑

六、第六个功能，Network：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化；

如上图就是用于抓包的页面，此页面中第二行、第三行的图标与各个勾选框的作用

1、第一个图标，点击这个图标的作用是：表示当前的请求不被清空（但是这里的请求是不跳转页面的请求，当跳转到新的页面，那么请求也会被清空）；

2、第二个图标，点击这个图标的作用是：清空请求；

3、第三个图标，点击这个图标的作用是：捕获屏幕。默认是关闭状态，点击后图标变成蓝色，会记录页面在不同时间下的快照，如下图所示

4、第四个图标，作用是：是否开启过滤选项，点击这个图标，图标变成蓝色，并且显示下图中红框中的菜单

5、第五个图标，作用是：是否使用更大的区域显示请求记录，点击这个图标后，下图红框中区域变大

6、第六个图标，作用是：是否显示overview概括，Overview是显示获取到资源的时间轴信息，点击这个图标，图标变成蓝色，并且显示下图红框中的内容

7、第七个勾选框，勾选了该选项后,会对网络请求按表单名称进行分组；

8、第八个勾选框，勾选了该选项后，刷新页面后，也不会删除跳转前页面的请求，如百度首页，当在百度首页点击右上角新闻，页面跳转到新闻页面，当没有勾选该选项后，刷新新闻页面，跳转前的百度首页请求数据消失不见了，当勾选该选项后，就算刷新新闻页面，跳转前的百度首页请求数据还存在，如下图所示

9、第九个勾选框，作用是：缓存开关

10、第十个勾选框，作用是：网络连接开关，勾选该选项后，网络断开；

11、第十一个搜索框，作用是：输入关键字可以模糊查询到请求的URL；

12、第十二个勾选框，作用是：勾选该选项可支持正则匹配；

13、第十三个勾选框，作用是：勾选该选项后隐藏链接的域名，即不显示全部链接；

14、最后这些勾选框的作用如下：

 All---所有数据；

XHR---一般是ajax调用的json文件；

JS---Javascript文件

CSS---CSS文件

Img---图片文件

 Media---媒体文件

Font---字体文件

Doc---一般是当前网页的HTML文件

 WS---WebSocket的缩写，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议；

Manifest---是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源；

Other：其他文件

15、一般在数据区谷歌浏览器默认为下图中红框中几个字段，如果需要查看其它数据，可以在Name字段后点击鼠标右键

会出现如下图所示下拉框，根据需要勾选上你所要查看的数据

Name---请求的文件；

 Status--- HTTP状态码；

Type---请求文件的类型；

Initiator---标记请求是由哪个对象或进程发起的（请求源）；

Parser： 请求由Chrome的HTML解析器时发起的；

Redirect：请求是由HTTP页面重定向发起的；

Script：请求是由Script脚本发起的；

Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址；

Size---从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)；

Time---请求或下载的时间，从发起Request到获取到Response所用的总时间；

Timeline--- 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序；

Waterfall---加载时间详情；

Method---请求方式；

16、查看资源的发起者(请求源)和依赖源

按住Shift并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的（请求源）和对该资源的请求过程中引发了哪些资源（依赖资源）；

如下图，在该资源的上方第一个标记为绿色的资源就是红框中资源的发起者（请求源）

如下图，红框中资源的下方标记为红色的资源是该资源的依赖源

17、下图红框中，显示总的请求数、数据传输量、加载时间信息

         DOMContentLoaded事件：在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成，

它在Overview上用一条蓝色竖线标记，所以在这边也是以蓝色文字显示确切的时间；

         load事件：在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发，它在Overview和Requests Table上用

一条红色竖线标记，在这边也是以红色文字显示确切的时间；

18、点击某个资源的Name可以查看该资源的详细信息，选择不同的资源所显示的各个tab页也不一样，常见的各个tab页如下图红框所示

各个tab页所表达的作用如下：

 Headers---该资源的HTTP头信息

Preview---根据你所选择的资源类型（JSON、图片、文本）显示相应的预览

Response---显示HTTP的响应信息

Cookies---显示资源HTTP的请求和响应过程中的缓存信息

Timing---显示资源在整个请求生命周期过程中各部分花费的时间，可能会涉及到如下过程的时间花费情况：

(1)、Queuing： 排队的时间花费，可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）；

(2)、Stalled：从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费，包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间；

(3)、Proxy Negotiation ：与代理服务器连接的时间花费；

(4)、DNS Lookup： 执行DNS查询的时间，网页上每一个新的域名都要经过一个DNS查询，第二次访问浏览器有缓存的话，则这个时间为0；

(5)、Initial Connection / Connecting ：建立连接的时间花费，包含了TCP握手及重试时间；

(6)、SSL： 完成SSL握手的时间花费；

(7)、Request sent： 发起请求的时间；

(8)、Waiting (Time to first byte (TTFB))： 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间，如果TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了；

(9)、Content Download ：获取Response响应数据的时间花费           

19、http请求的八种方式

首先需要了解一下HTTP协议，什么是HTTP协议？HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法

HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT

现在常用的就是HTTP1.1

HTTP八种请求方式各自的作用：

20、http请求与响应

1)、发起http的请求由：请求行、请求头部、空行、请求数据四个部分组成；

而请求行又分为三个部分：请求方法、请求地址和协议版本；

(1)、请求方法：就是上面所说的http请求的八种方法，GET、POST、HEAD、OPTIONS、 PUT、 DELETE、TRACE、CONNECT方法；

(2)、请求地址：

URL：统一资源定位符，是一种自愿位置的抽象唯一识别方法。

组成：<协议>：//<主机>：<端口>/<路径>

端口和路径有时可以省略（HTTP默认端口号是80）

  (3)、协议版本：

            协议版本的格式为：HTTP/主版本号.次版本号，常用的有HTTP/1.0和HTTP/1.1

 HTTP请求的7个步骤
1.、建立TCP链接
2、浏览器发送请求（GET/sample/hello.jsp HTTP/1.1）
3、浏览器发送请求头（request header）
4、服务器发送应答（HTTP/1.1 200 OK）
5、服务器发送应答头（response header）
6、服务器发送数据
7、服务器关闭TCP连接

 2) 响应http的请求由：状态行、响应头部、空行、响应数据四个部分组成；

21、Headers头各个字段的作用

     Headers包括四个部分：

      1)、General：常规信息

      2)、Response Headers：响应头

      3)、Request Headers：请求头

      4)、Query String Parameters：请求数据

1)、General：常规信息

(1)、 Request URL ：请求的url

(2)、Request Method ： 请求的方法，一般是GET、POST

(3)、Status Code：HTTP 状态码，200 OK表示请求成功

1. 200 OK //客户端请求成功
2. 400 Bad Request //客户端请求有语法错误，不能被服务器所理解
3. 401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
4. 403 Forbidden //服务器收到请求，但是拒绝提供服务
5. 404 Not Found //请求资源不存在，eg：输入了错误的URL
6. 500 Internal Server Error //服务器发生不可预期的错误
7. 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

(4)、Remote Address：请求的远程IP地址

(5)、Referrer Policy：在页面引入图片、JS等资源，或者从一个页面跳到另一个页面，都会产生新的HTTP请求，浏览器一般都会给这些请求头加上表示来源的Referrer字段；

新的Referrer Policy规定了五种Referrer策略：No Referrer、No Referrer When Downgrade、Origin Only、Origin When Cross-origin和Unsafe URL。

No Referrer：任何情况下都不发送Referrer信息；

No Referrer When Downgrade：仅当发生协议降级（如HTTPS页面引入HTTP资源，从HTTPS页面跳到HTTP等）时不发送Referrer信息，这个规则是现在大部分浏览器默认所采用的；

Origin Only：发送只包含host部分的Referrer，启用这个规则，无论是否发生协议降级，无论是本站链接还是站外链接，都会发送Referrer信息，但是只包含协议+ host部分（不包含具体的路径及参数等信息）；

Origin When Cross-origin：仅在发生跨域访问时发送只包含host的Referrer，同域下还是完整的。它与Origin Only的区别是多判断了是否Cross-origin。需要注意的是协议、域名和端口都一致，才会被浏览器认为是同域

 Unsafe URL：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送Referrer信息，正如其名，这是最宽松而最不安全的策略

2)、Response Headers：响应头

3)、Request Headers：请求头

下面的表格中是解释请求头各个字段的作用：

Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。

Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。

Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

Security:判断当前网页是否安全。

Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等