1 开发者工具面板
    面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板。

这些按钮的功能点如下:

·        Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

·        Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。

·        Sources:断点调试JS。

·        Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。

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

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

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

2 Network面板
2.1 面板功能分布
    Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。该面板主要包括5大块窗格:

Controls 控制Network的外观和功能。
Filters 控制Requests Table具体显示哪些内容。
Overview 显示获取到资源的时间轴信息。
Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
Summary 显示总的请求数、数据传输量、加载时间信息。
2.2 请求资源面板
Name 资源名称,点击名称可以查看资源的详情情况,包括Headers、Preview、Response、Cookies、Timing。
Status HTTP状态码。
Type 请求的资源MIME类型。
Initiator 标记请求是由哪个对象或进程发起的(请求源)。
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
Watefall显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。
2.3 捕获屏幕
    Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。

双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

2.4 查看DOMContentLoaded和load事件信息
DOMContentLoaded和Load这两个事件会高亮显示。

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

load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

DOMContentLoaded事件在Overview上用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切的时间。

Load事件同样会在Overview和RequestsTable上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。

2.5 查看具体资源的详情
通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
针对上面4个Tab进行详细讲解一下各个功能:

2.5.1 查看资源HTTP头信息
    在Headers标签里面可以看到HTTP   Request、URL、HTTP Method、Status Code、Remote Address 等基本信息和详细的Response Headers、RequestHeaders以及Query String Parameters或者FormData等信息。

2.5.2 查看资源预览信息
在Preview标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

2.5.3 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

2.5.4 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。

2.5.5 分析资源在请求的生命周期内各部分时间花费信息
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

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

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

·        Proxy Negotiation :与代理服务器连接的时间花费。

·        DNS Lookup :执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0。

·        Initial Connection / Connecting :建立连接的时间花费,包含了TCP握手及重试时间。

·        SSL :完成SSL握手的时间花费。

·        Request sent :发起请求的时间。

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

·        Content Download: 获取Response响应数据的时间花费。

2.6 查看资源的发起者(请求源)和依赖项
通过按住Shfit并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。

在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。

在该资源的下方标记为红色的资源是该资源的依赖资源。

原文链接:https://blog.csdn.net/zengzhenzong/article/details/80446732

Google开发者F12工具面板-network详解的更多相关文章

  1. 黑苹果引导工具 Clover 配置详解及Clover Configurator使用

    黑苹果引导工具 Clover 配置详解及Clover Configurator使用  2017-03-11 14:01:40 by SemiconductorKING 转自:@三个表哥   简介: 可 ...

  2. 日志分析工具ELK配置详解

    日志分析工具ELK配置详解 一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...

  3. Fiddler抓取https请求 & Fiddler抓包工具常用功能详解

    Fiddler抓取https请求 & Fiddler抓包工具常用功能详解   先来看一个小故事: 小T在测试APP时,打开某个页面展示异常,于是就跑到客户端开发小A那里说:“你这个页面做的有问 ...

  4. 分区工具parted的详解及常用分区使用方法【转】

    来源:http://blog.51cto.com/zhangmingqian/1068779 分区工具parted的详解及常用分区使用方法 一.         parted的用途及说明 概括使用说明 ...

  5. virtualbox centos安装增强工具和问题详解

    virtualbox centos安装增强工具和问题详解 VirtualBox 大家都习惯性把它简称为 Vbox ,比 VM 的体积小.开源.速 度快.不过在使用 VirtualBox 在虚拟机中安装 ...

  6. redis cluster管理工具redis-trib.rb详解

    redis cluster管理工具redis-trib.rb详解 来源 http://weizijun.cn/2016/01/08/redis%20cluster%E7%AE%A1%E7%90%86% ...

  7. Protobuf 文件生成工具 Prototool 命令详解

    Protobuf 文件生成工具 Prototool 命令详解 简介 Prototool 是 Protobuf 文件的生成工具, 目前支持go, php, java, c#, object c 五种语言 ...

  8. Apache性能测试工具ab使用详解~转载

    Apache自带性能测试工具ab使用详解 一. Apache的下载 1. http://www.apache.org/,进入Apache的官网 2. 将页面拖到最下方“Apache Project L ...

  9. Docker系列10—容器编排工具Docker Compose详解

    本文收录在容器技术学习系列文章总目录 1.Docker Compose 概述 Compose是一个用于定义和运行多容器Docker应用程序的工具.使用Compose,您可以使用Compose文件来配置 ...

随机推荐

  1. TCP协议如何保证可靠传输?

    一.TCP的可靠传输如何保证? 在TCP连接中,数据流必须以正确的顺序传送给对方.TCP的可靠性是通过顺序编号和确认(ACK)实现的.TCP在开始传送一个段时,为准备重传而首先将该段插入到发送队列中, ...

  2. async/await简单使用

    function process(i) { var p = new Promise(function(resolve,reject){ setTimeout(function(){ console.l ...

  3. IP地址网段表示法

    172.12.34.0/25 子网掩码:用于表示IP地址中的多少位用来做主机号.因为"其中值为1的比特留给网络号和子网号,为0的比特留给主机号"(TCP/IP V1). 172.1 ...

  4. 教你如何添加Xcode 9.3配置包?(安装流程可供其他版本安装参考)

    1.准备好你想要的Xcode版本的安装包 ,这里以Xcode 9.3为例.                        →                   2.打开Xcode开发工具的安装路径 ...

  5. 从 http协议角度解析okhttp

    Okhttp 介绍 OkHttp 是 Square 公司开源的一款网络框架,封装了一个高性能的 http 请求库. 支持 spdy.http2.0.websocket 等协议 支持同步.异步请求 封装 ...

  6. [转]Eclipse插件开发之基础篇(2) 第一个Eclipse插件

    原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/15/eclipse_plugin_1_1_1.html 在Eclipse中使用PDE(Plug ...

  7. mysql从命令行执行sql语句

    mysql -u root -p -e "create database mydb;"

  8. pytest-2:allure 的安装、使用

    版本对应: python3.4==>allure-pytest2.7.0 python3.6==>allure0pytest2.8.6 环境安装: 1.先安装好对应的python,准备好p ...

  9. 第十四周博客作业 <西北师范大学| 周安伟>

    第十四周作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 作业要求链接https://www.cnblogs.com/nwnu-daizh/p/10909068 ...

  10. day80_10_29git冲突解决与短信服务redis

    一.开发中的操作. 在项目开发中,在工作区进行开发,开发结束后提交到本地版本库. 再拉取远程仓库,具体如下: """ 1.开发前,拉一次远程仓库 2.工作区进行开发 3. ...