GOOGLE开发者工具之NETWORK

我们知道，在浏览器中按F12快捷键就可以进入GOOGLE的调试界面

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点如下：

暂时这三个用的比较多

• Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。（用于调试前端代码）
• Sources:断点调试JS。（用于调试前端代码）
• Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。（用于分析前后端交互）

以下暂时均作为了解即可

• Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
• Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
• Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
• Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security:判断当前网页是否安全。

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

---

Network

那我就按照从左到右的顺序来写啦~

• 记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。

• 清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）

• 捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。

 

过滤器 能够自定义筛选条件，找到自己想要资源信息，如下图所示。

 

也可以是一些指定条件
指定条件有哪些？

domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：当前时间点在执行的请求。当前可用值：running

larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method：使用何种HTTP请求方式。如 GET

mime-type：也写作content-type，是资源类型的标识符。如 text/html

scheme：协议规定。如 HTTPS

set-cookie-name：服务器设置的cookies名称

set-cookie-value：服务器设置的cookies的值

set-cookie-domain：服务器设置的cookies的域

status-code：HTTP响应头的状态码

• 显示详细信息

 

显示时间流

 

• 是否保留日志 
  当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，不会清空的哟~

• 是否进行缓存

  当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。注意，在调试中，有时这个选项会造成很大的干扰，没有错误，但就是不出效果，可能就是因为使用了缓存，此时就需要勾选这个选项，使得缓存失效。

• 设置模拟限速，如下图所示。
  

  设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

Network主体内容介绍

 

下列介绍中，前者为名词解释，后者为举例

• Name/Pat：资源名称以及URL路径 （main.css）

• Method：Http请求方法 (GET或者POST)

• status/Text：Http状态码/文字解释 （200，ok）

• Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

• Initiator：解释请求是怎么发起的，有四种可能的值

  1. Parser ：请求是由页面的html解析时发送

  2. Redirect：请求是由页面重定向发送

  3. script ：请求是由script脚本处理发送

  4. other ：请求是由其他过程发送的，比如页面里的Link链接点击

• size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小

请求文件具体说明

点击某个具体请求后的界面，如下图所示：

 

 

一共分为四个模块：

• Headers

 

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

• Preview：预览面板，用于资源的预览。

Response：响应信息面板包含资源还未进行格式处理的内容

Timing：资源请求的详细信息花费时间