官方文档:https://developers.google.com/web/tools/chrome-devtools/network/

1.如何打开

无论是在Windows还是Mac,都可以使用(FN)+F12键打开Chrome的Network面板。

2.面板组成

如图所示,Chrome的Network面板主要由5个部分组成,包括控制器、过滤器、概览、请求列表、概要,下面简单介绍下这5个部分的作用。

控制器:控制面板的外观与功能

过滤器:过滤请求列表中显示的资源

  • 按住Command(Mac)或Ctrl(Window/Linux),然后点击过滤器可以同时选择多个过滤器。

概览:显示HTTP请求、响应的时间轴。

请求列表:默认时间排序,可选择显示列。

概要:请求总数、总数据量、总花费时间等。

3.控制器

模拟慢速网络

还可以自定义,点击Add…

4.过滤器

如何对请求进行过滤呢?

4.1按字符串

1.键入png到过滤文本框。仅显示包含文本的文件png。在这种情况下,与过滤器匹配的唯一文件是PNG图像。

2.类型/.*\.[cj]s+$/。DevTools过滤掉任何资源,其文件名不以a jc后跟1个或多个s字符结尾。

3.类型-main.css。DevTools过滤掉了main.css。如果任何其他文件与模式匹配,它们也将被过滤掉。

4.2按类型

  • XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Manifest或Other(此处为列出的任何其他类型)
  • 多个类型,按住Command(Mac)或Ctrl(Windows、Linux)
  • 按时间过滤:概览面板,拖动滚动条
  • 隐藏Data URLs:CSS图片等小文件以 BASE64 格式嵌入HTML中,以减少HTTP请求数。

4.3属性过滤

下面演示使用Filter过滤器,如图所示:

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

多属性间通过空格实现 AND 操作。

5.请求列表的排序

  1. 时间排序,默认

  2. 按列排序

  3. 按活动时间排序

    • Start Time:发出的第一个请求位于顶部
    • Response Time:开始下载的第一个请求位于顶部
    • End Time:完成的第一个请求位于顶部
    • Total Duration:连接设置时间和请求/响应时间最短的请求位于顶部
    • Latency:等待最短响应时间的请求位于顶部

6.请求列表

简单介绍下每列的含义:

Name:资源的名称

Status:HTTP状态代码

Type:请求的资源的MIME类型

Initiator:发起请求的对象或进程。它可能有以下几种值:

  • Parser(解析器):Chrome的 HTML 解析器发起了请求(鼠标悬停显示JS脚本)
  • Redirect(重定向):HTTP重定向启动了请求
  • Script(脚本):脚本启动了请求
  • Other(其他):一些其他进程或动作发起请求,例如用户点击链接跳转到页面或在地址栏中输入网址。

Size:服务器返回的响应大小(包括头部和包体),可显示解压后大小

Time:总持续时间,从请求的开始到接受响应中的最后一个字节

Waterfall:各请求相关活动的直观分析图

鼠标右键单击,添加其他列:

还可以自定义header头

7.预览请求内容

如图所示,在请求列表点击以下

功能包括:

  • 查看头部,包括请求头、响应头。
  • 查看Cookie
  • 预览响应正文:查看图像用
  • 查看响应正文
  • 时间详细分布
  • 导出数据为HAR格式
  • 查看未压缩的资源大小:Use Large Request Rows
  • 浏览器加载时间(概览、概要、请求列表)DOMContentLoaded 事件的颜色设置为蓝色,而load事件设置为红色
  • 将请求数据复制到剪贴板
    • Copy Link Address:将请求的网址复制到剪贴板
    • Copy Response:将响应包体复制到剪贴板
    • Copy as cURL:以 cURL 命令形式复制请求
    • Copy All as cURL:以一系列 cURL 命令形式复制所有请求
    • Copy All as HAR:以 HAR 数据形式复制所有请求
  • 查看请求上下游:按住 shift 键悬停请求上,绿色是上游,红色是下游。

下面演示如何查看请求上下游,首先按住 shift 键,其次移动鼠标到不同请求,如图所示:

8.浏览器加载时间

触发流程:

  • 解析 HTML 结构
  • 加载外部脚本和样式表文件
  • 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
  • DOM 树构建完成 // DOMContentLoaded 事件
  • 加载图片等外部文件
  • 页面加载完毕 // load事件

9.请求时间详细分布

点击请求列表后,找到Timing,看到如图所示的字段

Queueing:浏览器在以下情况下对请求排队

  • 存在更高优先级的请求
  • 此源已打开六个 TCP 连接,达到限值,仅适用于 HTTP/1.0 和 HTTP/1.1
  • 浏览器正在短暂分配磁盘缓存中的空间

Stalled:请求可能会因 Queueing 中描述的任何原因而停止

DNS Lookup:浏览器正在解析请求额IP地址

Proxy Negotiation:浏览器正在与代理服务器协商请求

Request sent:正在发送请求

ServiceWorker Preparation:浏览器正在启动Service Worker

Request to ServiceWorker:正在将请求发送到Service Worker

Waiting(TTFB):浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte(至第一字节的时间)。此时间包括1次往返延迟时间及服务器准备响应所用的时间

Content Download:浏览器正在接收响应

Receiving Push:浏览器正在通过 HTTP/2 服务器推送接收此响应的数据

Reading Push:浏览器正在读取之前收到的本地数据

10.阻止请求

当某些资源不可用时,页面的外观和行为如何?它完全失败了,还是仍然有些功能?阻止要求查找:

1.按Control+ Shift+ P或 Command+ Shift+ P(Mac)打开命令菜单

2.键入block,选择“ 显示请求阻止”,然后按Enter。

3.单击添加模式

4.类型main.css

5.单击添加

6.重新加载页面。正如预期的那样,页面的样式有点混乱,因为它的主样式表已被阻止。请注意main.css网络日志中的行。红色文本表示资源已被阻止。

main.css已被封锁

7.取消选中启用请求阻止复选框。

Chrome教程(一)NetWork面板分析网络请求的更多相关文章

  1. Chrome教程之NetWork面板分析网络请求

    官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 最近打算写一写Chrome教程文档,不知道大家最感兴趣的是什 ...

  2. Chrome 调试 react-native 通过Network面板查看网络请求

    参考 https://github.com/facebook/react-native/issues/934 三楼 真机或模拟器下 Debug JS Remotely, 会打开chrome,地址为ip ...

  3. Web协议详解与抓包实战:HTTP1协议-如何用Chrome的Network面板分析HTTP报文(1)

    一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能 • 过滤器:过滤请求列表中显示的资源 • 按住 Command (Mac)或 Ctrl (W ...

  4. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...

  5. 【cocos2d-js网络教程篇】cocos2d-js http网络请求

    前言 刚入手cocos2d-js,看到网上的JS的http网络请求,大部分都是错的.原因在于,js-tests里面的网络请求实例没有给出加载完成事件.正确的加载完成事件如下: var xhr = cc ...

  6. chrome中的network面板,怎么添加method(请求类型)选项.

  7. # Volley源码解析(二) 没有缓存的情况下直接走网络请求源码分析#

    Volley源码解析(二) 没有缓存的情况下直接走网络请求源码分析 Volley源码一共40多个类和接口.除去一些工具类的实现,核心代码只有20多个类.所以相对来说分析起来没有那么吃力.但是要想分析透 ...

  8. 使用tcpdump+Wireshark(或Fiddler)做linux服务器的网络请求分析

    我们的服务器上,一般都没有窗口界面,这时候要抓包,用tcpdump是最方便的.而分析网络请求时,wireshark又是相当方便的,这时候我们就需要把它们两个一起来使用了. tcpdump 抓取数据 命 ...

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

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

随机推荐

  1. zookeeper集群搭建及ZAB协议

    zookeeper集群搭建非常简单,准备三台安装好zookeeper服务器,在其zoo.cfg配置中分表添加如下配置 initLimit 10 集群中的follower与leader之间完成初始化同步 ...

  2. 使用PrintDocument定制打印格式

    虽然说使在IE上直接调用打印插件打印已经不常用,但是有时候还是会用到,这里就记录一下. 首先我们列出来我们的打印类 public class PrintService { //打印机名称 privat ...

  3. C# vb .net实现扭曲角特效滤镜图像处理

    在.net中,如何简单快捷地实现Photoshop滤镜组中的扭曲角效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一 ...

  4. 面试总结 转发(CSDN 博主)

    1 https://blog.csdn.net/jackfrued/article/details/44921941 2 https://blog.csdn.net/jackfrued/article ...

  5. PCL提取圆柱系数

    网上看了很多教程,没看到圆柱提取后的系数解释. 源码如下: #include <pcl/ModelCoefficients.h> #include <pcl/io/pcd_io.h& ...

  6. java第三次面试总结

    这次面试是二面,由于自己的经验不足,面试的结果不是很令人满意,所以与这家公司失之交臂,在这里记录一下经历,吸取教训. 之前的一面是笔试+面试,面试是主管,今天的面试是总监.在前台招待我的时候,还跟我说 ...

  7. 深入理解JVM(五) -- 垃圾回收算法

    上篇文章我们了解到哪些内存区域和哪些对象可以被回收,这篇文章我们就来了解一下具体的垃圾回收算法的思路,不讨论具体的实现. 一 最基础算法 标记-清除(Mark-Swap) 为什么说他是最基础的算法,因 ...

  8. iOS - 小功能 跳转到淘宝或天猫的商品展示详情页

    最近做iOS项目的时候遇到一个需求,点击广告页,跳转到淘宝或天猫的商品详情页. 具体需要是这样: 1)安装了淘宝:跳转到淘宝详情页. 2)没装淘宝,装了天猫:跳转到天猫详情页 3)淘宝.天猫都没装:跳 ...

  9. 一张图弄懂js原型和原型链

    前言 JavaScript的原型和原型链是面试的时候经常被问及到的问题,考察了我们对JavaScript的基础掌握情况,今天我们在这里用一张图来梳理下其中的知识点. 下面我来引入这张非常经典的图,我也 ...

  10. 结合模板导出PDF文件

    @Action("report_exportJasperPdf")    public String exportJasperPdf() throws Exception{     ...