转自:Tools for Web Developers

   Network 面板记录页面上每个网络操作的相关信息,包括详细的耗时数据、HTTP 请求与响应标头和 Cookie,等等。

  TL;DR

  • 使用 Network 面板记录和分析网络活动。
  • 整体或单独查看资源的加载信息。
  • 过滤和排序资源的显示方式。
  • 保存、复制和清除网络记录。
  • 根据需求自定义 Network 面板。

  <一>Netwrok面板概览

   Netwrok面板由五个窗格组成

  1. Controls。使用这些选项可以控制 Network 面板的外观和功能。
  2. Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示:按住 Cmd (Mac) 或 Ctrl(Windows/Linux) 并点击过滤器可以同时选择多个过滤器。
  3. Overview。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起,则说明这些资源被同时检索。
  4. Requests Table。 此表格列出了检索的每一个资源。 默认情况下,此表格按时间顺序排序,最早的资源在顶部。点击资源的名称可以显示更多信息。 提示:右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。
  5. Summary。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

  

  备注:默认情况下,Requests Table 会显示以下列。您可以添加和移除列

  • Name。资源的名称。
  • Status。HTTP 状态代码。
  • Type。已请求资源的 MIME 类型。
  • Initiator。发起请求的对象或进程。值为以下选项之一:
  • Parser。Chrome 的 HTML 解析器发起请求。
  • Redirect。HTTP 重定向发起请求。
  • Script。脚本发起请求。
  • Other。某些其他进程或操作发起请求,例如用户通过链接或者在地址栏中输入网址导航到页面。
  • Size。响应标头(通常为数百字节)加响应正文(由服务器提供)的组合大小。
  • Time。从请求开始至在响应中接收到最终字节的总持续时间。
  • Timeline。Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

  <二> 记录网格活动

  在 Network 面板打开时,DevTools 在默认情况下会记录所有网络活动。 要记录活动,只需在面板打开时重新加载页面,或者等待当前加载页面上的网络活动。

  您可以通过 record 按钮指示 DevTools 是否记录。 显示红色 () 表明 DevTools 正在记录。 显示灰色 () 表明 DevTools 未在记录。 点击此按钮可以开始或停止记录,也可以按键盘快捷键 Cmd/Ctrl+e。

  <三> 在记录期间捕捉屏幕截图

  Network 面板可以在页面加载期间捕捉屏幕截图。此功能称为幻灯片

  点击摄影机图标可以启用幻灯片。图标为灰色时,幻灯片处于停用状态 ()。如果图标为蓝色,则说明已启用 ()。

  重新加载页面可以捕捉屏幕截图。屏幕截图显示在概览上方。

  

  将鼠标悬停在一个屏幕截图上时,Timeline 将显示一条黄色竖线,指示帧的捕捉时间。

  

  双击屏幕截图可查看放大版本。在屏幕截图处于放大状态时,使用键盘的向左和向右箭头可以在屏幕截图之间导航。

   

  <四>  查看DOMContentLoaded和load事件

  Network 面板突出显示两种事件:DOMContentLoaded 和 load

  解析页面的初始标记时会触发 DOMContentLoaded。 此事件将在 Network 面板上的两个地方显示.

    a. Overview 窗格中的蓝色竖线表示事件。

    b. 在 Summary 窗格中,您可以看到事件的确切时间。

  页面完全加载时将触发 load。此事件显示在三个地方:

    a.Overview 窗格中的红色竖线表示事件。

  1.  b. Requests Table 中的红色竖线也表示事件。
  2.         c
  3. .在 Summary 窗格中,您可以看到事件的确切时间。

  

  <五> 查看单个资源的详细信息

  点击资源名称(位于 Requests Table 的 Name 列下)可以查看与该资源有关的更多信息。

  可用标签会因您所选择资源类型的不同而不同,但下面四个标签最常见:    

  • Headers。与资源关联的 HTTP 标头。
  • Preview。JSON、图像和文本资源的预览。
  • Response。HTTP 响应数据(如果存在)。
  • Timing。资源请求生命周期的精细分解。

  

  <六> 查看网络耗时

  点击 Timing 标签可以查看单个资源请求生命周期的精细分解。

  生命周期按照以下类别显示花费的时间:

  • Queuing
  • Stalled
  • 如果适用:DNS lookup、initial connection、SSL handshake
  • Request sent
  • Waiting (TTFB)
  • Content Download

  

  将鼠标悬停到 Timeline 图表内的资源上时,您也可以看到相同的信息。

  

  <七> 查看HTTP标头

  点击 Headers 可以显示该资源的标头。

   Headers 标签可以显示资源的请求网址、HTTP 方法以及响应状态代码。 此外,该标签还会列出 HTTP 响应和请求标头、它们的值以及任何查询字符串参数。  

  

  点击每一部分旁边的 view source 或 view parsed 链接,您能够以源格式或者解析格式查看响应标头、请求标头或者查询字符串参数。

  

  您也可以点击相应部分旁边的 view URL encoded 或 view decoded 链接,以网址编码或解码格式查看查询字符串参数。

  

  <八> 查看资源发起者和依赖项

  按住 Shift 并将鼠标悬停在资源上,可以查看其发起者和依赖项。 本部分将您悬停的资源称为目标

   目标上方的第一个绿色编码资源为目标的发起者。 如果上方存在第二个也是绿色编码的资源,那么该资源将是发起者的发起者。 目标下方红色编码的任何资源都是目标的依赖项。

  下方的屏幕截图中,目标是 dn/。此目标的发起者为以 rs=AA2Y 开头的脚本。 发起者 (rs=AA2Y) 的发起者为 google.com。 最后,dn.js 是目标 (dn/) 的依赖项

    <九> 排序请求

  默认情况下,Requests Table 中的资源按照每个请求的开始时间排序,最早的请求位于顶部。

  点击列标头可以按照该标头下每个资源的值对表格排序。 再次点击相同的标头可以将排序顺序更改为升序或降序。

  Timeline 列与其他列不同。点击此列时,它将显示一个由多个排序字段组成的菜单:

  • Timeline。按每个网络请求的开始时间排序。这是默认排序方式,与按 Start Time 选项排序相同。
  • Start Time。按每个网络请求的开始时间排序(与按 Timeline 选项排序相同)。
  • Response Time。按每个请求的响应时间排序。
  • End Time。按每个请求完成的时间排序。
  • Duration。按每个请求的总时间排序。选择此过滤器可以确定哪些资源的加载时间最长。
  • Latency。按请求开始与响应开始之间的时间排序。 选择此过滤器可以确定哪些资源至第一字节 (TTFB) 的时间最长。

  

  <十> 过滤请求

  Network 面板提供了多种方式来过滤要显示哪些资源。 点击 Filter 按钮 () 可以隐藏或显示 Filters 窗格。

  使用内容类型按钮可以仅显示选定内容类型的资源。

  注:按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时启用多个过滤器。

  

  Filter 文本字段还支持各种关键词,这样,您可以按照各种属性对资源排序,例如使用 larger-than 关键字按文件大小进行排序。

  下文列表说明了所有关键字。

  • domain。仅显示来自指定域的资源。您可以使用通配符字符 (*) 来包含多个域。 例如,*.com 将显示来自以 .com 结尾的所有域名的资源。 DevTools 会使用它遇到的所有域填充自动填充下拉菜单。
  • has-response-header。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用它遇到的所有响应标头填充自动填充下拉菜单。
  • is。使用 is:running 可以查找 WebSocket 资源。
  • larger-than。显示大于指定大小的资源(以字节为单位)。 将值设为 1000 等同于设置为 1k
  • method。显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用它遇到的所有 HTTP 方法填充下拉菜单。
  • mime-type。显示指定 MIME 类型的资源。DevTools 会使用它遇到的所有 MIME 类型填充下拉菜单。
  • mixed-content。显示所有混合内容资源 (mixed-content:all),或者仅显示当前显示的资源 (mixed-content:displayed)。
  • scheme。显示通过未保护 HTTP (scheme:http) 或受保护 HTTPS (scheme:https) 检索的资源。
  • set-cookie-domain。显示具有 Set-Cookie 标头并带有与指定值匹配的 Domain 属性的资源。 DevTools 会使用它遇到的所有 Cookie 域填充自动填充下拉菜单。
  • set-cookie-name。显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 名称填充自动填充下拉菜单。
  • set-cookie-value。显示具有 Set-Cookie 标头并且值与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 值填充自动填充下拉菜单。
  • status-code。仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用它遇到的所有状态代码填充自动填充下拉菜单。  

  <十一> 复制,保存和清除网络信息

  在 Requests Table 中点击右键可以复制、保存或删除网络信息。 某些选项取决于上下文,因此,如果您希望操作单个资源,则需要右键点击该资源所在的行。

  下面的列表说明了每一个选项。

  • Copy Response。将选定资源的 HTTP 响应复制到系统剪贴板。
  • Copy as cURL。以 cURL 命令字符串的形式将选定资源的网络请求复制到系统剪贴板。请参阅以 cURL 命令形式复制请求
  • Copy All as HAR。以 HAR 数据形式将所有资源复制到系统剪贴板。HAR 文件包含用于说明网络“瀑布”的 JSON 数据结构。多款第三方 工具 可以依据 HAR 文件中的数据重建网络瀑布。请参阅网页性能工具: HTTP 归档 (HAR),了解更多信息。
  • Save as HAR with Content。将所有网络数据及每一个页面资源保存到 HAR 文件。 二进制资源(包括图像)以 Base64 编码文本的形式编码。
  • Clear Browser Cache。清除浏览器缓存。提示:您也可以从 Network Conditions 抽屉式导航栏中启用或停用浏览器缓存。
  • Clear Browser Cookies。清除浏览器的 Cookie。
  • Open in Sources Panel。在 Sources 面板中打开选定资源。
  • Open Link in New Tab。在新标签中打开选定资源。您也可以在 Network 表中双击资源名称。
  • Copy Link Address。将资源网址复制到系统剪贴板。
  • Save。保存选定的文本资源。仅在文本资源上显示。
  • Replay XHR。重新发送选定的 XMLHTTPRequest。仅在 XHR 资源上显示。

chrome开发者工具--使用 Network 面板测量您的网站网络性能。的更多相关文章

  1. Chrome开发者工具之Network面板

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

  2. Jerry和您聊聊Chrome开发者工具

    Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...

  3. 爬虫必备工具-chrome 开发者工具

    在某个网站上,分析和抓取数据,我们用的最多的工具就是 Chrome 开发者工具 01 元素面板 通过元素(Element)面板,我们能查看发哦想抓取页面渲染内容所在的标签.使用什么 CSS 属性(例如 ...

  4. 如何使用Chrome开发者工具找到Marketing Cloud某个contact的guid

    我们使用nodejs对contact进行修改时,需要指定待修改contact实例的guid. 这个guid属于technical属性,在Marketing Cloud UI上默认情况下不可见.如何找到 ...

  5. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

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

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

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

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

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

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

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

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

随机推荐

  1. Windows安装gmpy2

    我在终端用python2的pip安装gmpy2时显示缺少Visual C++ 9.0 按照其要求,访问他给的网址安装一下 https://pypi.org/project/gmpy2/#files 进 ...

  2. 【技术博客】 Laravel 5.1单元测试(PHPUnit)入门

    目录 Laravel 5.1单元测试(PHPUnit)入门 简介 安装与配置 1. 安装 2. 配置 编写测试样例 1. 新建测试样例 2. 编写函数的测试 3. 编写Web功能测试 运行测试与查看结 ...

  3. pytest 学习笔记一 入门篇

    前言 之前做自动化测试的时候,用的测试框架为Python自带的unittest框架,随着工作的深入,发现了另外一个框架就是pytest (官方地址文档http://www.pytest.org/en/ ...

  4. [C++基础] 数组、指针、内存篇

    一.数组 2.1 int a[2][2]= { {1}, {2,3} },则 a[0][1] 的值是多少? 二维数组的初始化一般有两种方式: 第一种方式是按行来执行,如int array\[2][3] ...

  5. storm单机运行报错 ERROR backtype.storm.daemon.executor -

    单机本地运行storm报错: 错误如下: java.lang.NullPointerException: null at test2.Spot2.nextTuple(Spot2.java:) ~[cl ...

  6. linux -------------- Linux系统安装jdk

    linux 安装软件有三种方式  tar (解压安装 ) rpm (直接安装) yum(在线) 安装主要步邹 1.下载jdk 软件包 2.检测是否安装 查看已安装jdk软件包 rpm -qa|grep ...

  7. PowerBuilder学习笔记之1开发环境

    Powerbuilder Classic 12.5开发环境(PB经典 12.5) 教材链接:https://wenku.baidu.com/view/5e087d6ab9f67c1cfad6195f3 ...

  8. asp.net core 和consul

    consul集群搭建 Consul是HashiCorp公司推出的使用go语言开发的开源工具,用于实现分布式系统的服务发现与配置,内置了服务注册与发现框架.分布一致性协议实现.健康检查.Key/Valu ...

  9. Java的常用API

    Object类 1.toString方法在我们直接使用输出语句输出对象的时候,其实通过该对象调用了其toString()方法. 2.equals方法方法摘要:类默认继承了Object类,所以可以使用O ...

  10. kubectl rollout回滚和autoscale自动扩容

    系列目录 kubernetes 滚动升级 Kubernetes 中采用ReplicaSet(简称RS)来管理Pod.如果当前集群中的Pod实例数少于目标值,RS 会拉起新的Pod,反之,则根据策略删除 ...