Chrome开发者工具详解(2)-Network面板

时间:2022-12-23 14:21:48

Chrome开发者工具详解(2)-Network面板

注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享

Chrome开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
Chrome开发者工具详解(2)-Network面板
这些按钮的功能点如下:

  • Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
  • Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
  • Sources:断点调试JS。
  • Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
  • Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。
  • Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
  • Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
  • Security:判断当前网页是否安全。
  • Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

Network面板

概述

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

我把Google官方网站上介绍Network面板的图贴到这里,该面板主要包括5大块窗格(Pane):

  1. Controls 控制Network的外观和功能。
  2. Filters 控制Requests Table具体显示哪些内容。
  3. Overview 显示获取到资源的时间轴信息。
  4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
  5. Summary 显示总的请求数、数据传输量、加载时间信息。

Chrome开发者工具详解(2)-Network面板

其中 Requests Table 显示如下信息列:

  • Name 资源名称,点击名称可以查看资源的详情情况,包括HeadersPreviewResponseCookiesTiming
  • Status HTTP状态码。
  • Type 请求的资源MIME类型。
  • Initiator 标记请求是由哪个对象或进程发起的(请求源)。
  • Parser: 请求由Chrome的HTML解析器时发起的。
  • Redirect:请求是由HTTP页面重定向发起的。
  • Script:请求是由Script脚本发起的。
  • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
  • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
  • Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
  • Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

捕获屏幕

Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

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

双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。

单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

Chrome开发者工具详解(2)-Network面板

查看DOMContentLoaded和load事件信息

DOMContentLoadedload这两个事件会高亮显示。

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

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

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

Chrome开发者工具详解(2)-Network面板

查看具体资源的详情

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

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能:

查看资源HTTP头信息

Headers标签里面可以看到HTTP Request URLHTTP MethodStatus CodeRemote Address等基本信息和详细的Response Headers
Request Headers以及Query String Parameters或者Form Data等信息。

Chrome开发者工具详解(2)-Network面板

查看资源预览信息

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

Chrome开发者工具详解(2)-Network面板

查看资源HTTP的Response信息

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

Chrome开发者工具详解(2)-Network面板

查看资源Cookies信息

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

Chrome开发者工具详解(2)-Network面板

分析资源在请求的生命周期内各部分时间花费信息

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请求时间和获得响应消息第一个字节的时间。
  • Content Download 获取Response响应数据的时间花费。

Chrome开发者工具详解(2)-Network面板

TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。

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

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

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

Chrome开发者工具详解(2)-Network面板

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

Chrome开发者工具详解(2)-Network面板

参考资料

个人博客

我的个人博客

Chrome开发者工具详解(2)-Network面板的更多相关文章

  1. 二、Chrome开发者工具详解(2)-Network面板

    摘自: http://www.cnblogs.com/charliechu/p/5981346.html

  2. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  3. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  4. 四、Chrome开发者工具详解(4)-Profiles面板

    摘自: http://www.cnblogs.com/charliechu/p/6003713.html

  5. 三、Chrome开发者工具详解(3)-Timeline面板

    摘自: http://www.cnblogs.com/charliechu/p/5992177.html

  6. 【转】Chrome开发者工具详解

    https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...

  7. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  8. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  9. Chrome开发者工具详解(五)之Network面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

随机推荐

  1. 抓取代理IP

    写脚本从指定网站抓取数据的时候,免不了会被网站屏蔽IP.所以呢,就需要有一些IP代理.随便在网上找了一个提供免费IP的网站西刺做IP抓取.本次实践抓取的是其提供的国内匿名代理.可以打开网站查看一下源码 ...

  2. maven pom.xml报错

    再在项目上强制update一下就可以了 如下: 此外使用maven时用默认的仓库速度会过慢 下载很小的jar包都需要很久 推介使用oschina的源 使用在这里:

  3. CMake使用教程

    转自 RichardXG 原文 CMake使用教程 CMake是一个比make更高级的编译配置工具,它可以根据不同平台.不同的编译器,生成相应的Makefile或者vcproj项目. 通过编写CMak ...

  4. find-all-anagrams-in-a-string

    https://leetcode.com/problems/find-all-anagrams-in-a-string/ package com.company; import java.util.A ...

  5. 【英语】Bingo口语笔记(72) - play系列

  6. C++11 多线程

    C++11开始支持多线程编程,之前多线程编程都需要系统的支持,在不同的系统下创建线程需要不同的API如pthread_create(),Createthread(),beginthread()等,使用 ...

  7. python 简单谈谈“类”

    文章出处:http://www.cnblogs.com/winstic/,请保留此连接 面向对象是python语言的一大特色,而类又是面向对象编程的核心 先来一段关于类的声明: class myCla ...

  8. 从相对路径说开来(从C++到Qt)

    从相对路径说开来(从C++到Qt) 转载自:http://blog.csdn.net/dbzhang800/article/details/6363165 在Qt论坛经常看到网友抱怨: QPixmap ...

  9. Selenium+Python之163邮件发送

    今晚写了一个163邮箱登录的脚本,由于不停的访问163登录主页导致直接访问163邮箱主页登录需要输入验证码,因为无法获取到验证码,就这导致直接访问主页登录脚本不可行,为了绕过验证码,现在先访问hao1 ...

  10. 设计模式笔记之二:Android开发中的MVP架构(转)

    写在前面,本博客来源于公众号文章:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=402435540&idx=1&sn ...