Chrome DevTools — Network

记录网络请求

默认情况下，只要DevTools在开启状态，DevTools会记录所有的网络请求，当然，记录都是在Network面板展示的。
clipboard.png

停止记录网络请求

  • 点击Stop recording network log红色图标，当它变为灰色时，表示DevTools不在记录请求

  • 在Network面板下，Command+E(Mac)或者Ctrl+E(Windows,Linux)

clipboard.png

清除网络请求

clipboard.png

跨页面加载时，保留网络请求记录

当页面重载或者页面跳转时，默认情况下，Network面板下的网络请求记录表也是刷新的。如果想保留之前页面的网络请求数据，可以勾选Preserve log。
常用的一个应用场景：登录/注册时会调用登录/注册API，开发者想查看这个接口返回的情况，但是登录/注册成功后一般会跳转到新的页面，导致了Network面板的请求记录被刷新从而看不到登录/注册接口返回的情况。此时勾选上Preserve log，无论跳转到那个页面，都能在Network网络请求记录表中查看到之前接口返回的情况。

clipboard.png

页面加载时捕获屏幕截图

捕获屏幕截图可以分析在页面加载的过程中，用户在不同的时间段内看到的网页是什么样子的。
点击Capture screenshots图标开启捕获功能，当图标变为蓝色表示已开启，重载页面即可看到不同时间的屏幕截图。

clipboard.png

捕获屏幕截图之后，可以进行以下操作：

  • 鼠标悬浮在一张图片上时，该图片四周会出现一个黄色的边框，同时，在Overview和Waterfall窗口里面也分别有一条黄色的竖线，这条黄色的竖线表示这张图片的捕获时间

  • 点击某一张图片，可以过滤掉在这张图片捕获之后发生的所有请求

  • 双击图片，可以放大该图片

clipboard.png

改变页面加载时的条件

禁用浏览器缓存

在http请求的过程中，有些资源在页面初次加载之后会被缓存到浏览器中，也就是那些状态码为304的资源。为了尽可能准确地模拟用户第一次加载我们网页时的情景，需要禁用浏览器缓存，这样，每一个请求都是从服务端传送过来的，较为准确地反应出网页初次加载的实际情况。
clipboard.png

模拟网速条件

在Network Throttling下拉框中可以选择不同的网络条件进行模拟，如2G、3G、4G、WiFi等。
clipboard.png

除了选中已有的网络选项，也可以自定义网速相关条件：打开Network Throttling菜单，选择Custom > Add。

另一种模拟情况较为特殊，就是无网络。利用service workers，PWA(Progressive Web Apps)在无网络的情况下依然可以使用。模拟这种无网络环境，直接勾选Offline即可。
clipboard.png

提示：有时候开发者会看到Network左侧有个警告图标，这个图标就是提示开发者当前处于模拟网络条件下。
clipboard.png

手动清除浏览器缓存、cookies

在网络请求记录表里面右键，选择Clear Browser Cache或Clear Browser Cookies。
clipboard.png

覆盖用户代理

打开Network抽屉面板：在DevTools下，按Esc键即可调出DevTools的抽屉面板，可以选择、切换不同的Tab选项。
clipboard.png

Network抽屉面板打开以后，不勾选Select automatically复选框，然后选择一个用户代理或者自定义一个。
clipboard.png

过滤请求

根据属性过滤

那个漏斗，对，就是它，点击漏斗图标使其颜色变为蓝色，然后就可以对网络请求表中的数据进行进一步的过滤。
clipboard.png

在输入框中可以输入一些字符串、域、大小、状态码、媒体类型等等，如果业务比较简单，可能输入一些字符串就搜索到自己想要的结果了。可输入的详细类型可参考官方文档。

根据类型过滤

clipboard.png

这里是可以多选的：按住Command(Mac)键或Ctrl(Windows,Linux)键，然后单击不同的类型，如点击JS和Img，则过滤出js文件和图片。显然，All不与其他类型共存，选择All的时候不能再选某一个具体类型。

隐藏data URLs

data URLs指一些嵌入到文档中的小型文件，在请求表里面以data:开头的文件就是，如较为常见的svg文件。勾选Hide data URLs复选框即可隐藏此类文件。
clipboard.png

根据时间过滤

点击下图中绿色方框的图标，显示/隐藏Overview窗口。在Overview窗口分别拖动左边或右边橙色圆圈中的滑动条，就可过滤出位于两个滑动条之间这段时间发出的请求，不是在这段时间发出的请求就被隐藏掉了。
clipboard.png

对请求表进行排序

按照列的类型排序

点击请求表每一列的列头，即可按照相应的类型进行排序，如，点击Size，则可按照资源从小到大或者从大到小（点击Size自动切换）进行排序。
clipboard.png

按照请求的不同阶段排序

在请求表的列头右键，然后鼠标移动到Waterfall，然后选择以下选项，默认按照对应时间从短到长的顺序排列：

  • Start Time：请求开始的时间（默认）

  • Response Time：资源开始下载的时间

  • End Time：请求结束的时间

  • Total Duration：请求的整个持续时间（发起至下载结束）

  • Latency 请求等待响应的时间

clipboard.png

比如，选择了Total Duration，Waterfall如下图所示：
clipboard.png

注：上图中的不同颜色代表不同的文件类型，如js、img、css等。每个请求的瀑布流图像都分为浅色部分和深色部分，浅色部分表示等待时间，深色部分表示下载时间，如上图中129ms是等待时间，110ms是下载资源所用的时间。

分析请求

查看请求记录

clipboard.png

请求表默认显示以下列：

  • Name：文件的名字或者资源的标识符

  • Status：HTTP状态码

  • Type：请求资源的MIME类型

  • Initiator：以下对象或处理可以发起一个请求

    • Parse：Chrome的HTML解析器

    • Redirect：HTTP重定向

    • Script：js函数

    • Other：一些别的处理或操作，比如通过链接导航到一个页面，或者是在浏览器的地址栏输入一个地址然后回车

  • Size：响应头大小+响应体大小

  • Time：总的持续时间，从发起请求到资源下载完成

  • Waterfall：每一个请求活动的不同阶段的可视化展示

增加或者删除列

在请求表的头部右键选择一个选项使其显示或隐藏。
clipboard.png

增加自定义的列

在请求表的头部右键，Response Headers > Manage Header Columns
clipboard.png

查看请求时间

在Waterfall查看某个请求相对于其他请求所消耗的时间长短及先后顺序。默认是以请求发起的时间排序的，所以，瀑布流中，越靠左的请求，发起的时间越早。
clipboard.png

Headers：查看请求头、响应头以及请求参数

在列Name下，点击某个请求的URL，可以查看到请求、响应的详细内容。
clipboard.png

默认情况下，请求、响应头是按照字母表顺序显示的http头部的名字，如果想按照实际接收的顺序显示，点击上图中的view source，反之点击上图中的view parsed。
在Headers选项卡中也可查看请求的参数，上图橙色方框部分。也有view source和view parsed，另外还有参数编码格式（view URL encoded）和解码格式（view decoded）。

Preview：查看响应体的预览

Response：查看响应体

Cookies：查看cookies

Timing：查看请求在各个阶段对应的时间

clipboard.png

各个时间段的意思：

  • Queueing：浏览器会在以下情况对请求进行排队：

    • 有更高优先级的请求

    • 在这个域下，已经有6个TCP连接了，达到Chrome最大限制数量。此条规则仅适用在HTTP/1.0和HTTP/1.1

  • Stalled：Queueing中的任何一个因素发生都会导致该请求被拖延

  • Proxy negotiation：浏览器与代理服务器协商消耗的时间

  • DNS Lookup：浏览器对请求的IP地址进行DNS查找所消耗的时间

  • Initial conncection：发起连接所消耗的时间

  • Request sent：请求发送消耗的时间

  • Waiting (TTFB)：浏览器等待响应的时间，TTFB表示 Time To First Byte

  • Content Download：资源下载所消耗的时间

查看请求的发起对象和依赖对象

在请求表的头部已经做过Initiator的简单介绍，其表示该条请求是由哪个对象或是处理操作发起的。如果B请求是由A请求发起的，显然，A是B的发起对象，B是A的依赖对象（B依赖A）。
按住Shift键，然后鼠标悬浮在某个请求上，该请求的发起对象由绿色标志，该请求的依赖对象由红色标志。
clipboard.png

查看加载事件

DevTools在多个地方显示了DOMContentLoaded和load事件发生时对应的时间。DOMContentLoaded事件对应蓝色的线（或者文字），load事件对应红色的线（或者文字）
clipboard.png

查看请求的总数量和总大小

clipboard.png

注：这里的数据表示DevTools打开以后被记录的请求所对应的数据，如果有些请求在DevTools打开之前已经发生了，这些请求的数据是不计算在这里面的。

改变Network面板的布局

  • 过滤器的显示隐藏（已经介绍）

  • Overview窗口的显示隐藏（已经介绍）

  • 请求表有简版和详细版两种不同的显示，默认是简版

点击下图中的图标，可切换两种显示方式。图标为蓝色时表示详细版，为灰色时表示简版。
clipboard.png

下面我们来看看两种显示方式的差异：
clipboard.png

clipboard.png

其实详细版就是多提供了一部分信息：

  • Name列多了一行灰色的文字，表示该资源的路径

  • Status列多了一行灰色的文字，表示HTTP状态码对应的文本

  • Initiator列多了一行灰色的文字，表示发起对象类型

  • Size列多了一行灰色的文字，表示该资源的实际大小
    Size列的第一行数据表示请求头和请求体的大小之和，由于HTTP请求的多样，会导致第一行数据的大小和第二行数据大小的不同，有可能第一行的数据比第二行的数据大，也可能第一行的数据比第二行的数据小，一般有以下几种原因：

    • 有响应头，甚至包含cookie（第一行 > 第二行）

    • 请求被缓存了（一般情况下，第一行 < 第二行）

    • 服务端gizp压缩（一般情况下，第一行 < 第二行）

  • Time列多了一行灰色的文字，表示请求等待响应的时间

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/282803.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Blazor University 中文版网站已上线

Blazor University 中文版网站已上线

在学习 Blazor 的过程中&#xff0c;找到了一个网站 Blazor University&#xff08;https://blazor-university.com&#xff09;。发现网站内容非常详实&#xff0c;正像首页所说的&#xff1a;通过浏览本网站中的信息&#xff0c;我打算带您从完全的新手到Blazor的所有方面的专…
阅读更多...
android:paddingtop 百分比,相对层中的百分比宽度

android:paddingtop 百分比,相对层中的百分比宽度

相对层中的百分比宽度我正在为登录进行表单布局。Activity在我的Android应用程序中。下面的图片是我希望它看起来的样子&#xff1a;我能够通过以下方式实现这个布局XML..问题是&#xff0c;这有点麻烦。我不得不对主机EditText的宽度进行硬编码。具体而言&#xff0c;我必须具…
阅读更多...
MySQL 查看表结构简单命令

MySQL 查看表结构简单命令

一、简单描述表结构&#xff0c;字段类型 desc tabl_name; 显示表结构&#xff0c;字段类型&#xff0c;主键&#xff0c;是否为空等属性&#xff0c;但不显示外键。 例如&#xff1a;desc table_name 二、查询表中列的注释信息 select * from information_schema.columns wher…
阅读更多...
简单获取任意app的URL Schemes

简单获取任意app的URL Schemes

简单说明 最近业务需要&#xff0c;一直在查询App的scheme相关信息&#xff0c;找到一种比较可靠的方法&#xff0c;分享给大家 步骤如下&#xff1a; 在电脑上使用iTunes下载那个app下载完后&#xff0c;在itunes里点击这个app&#xff0c;选择->Show in Finder&#xff0c…
阅读更多...
Java中short、int、long、float、double的取值范围

Java中short、int、long、float、double的取值范围

一、基本数据类型的特点&#xff0c;位数&#xff0c;最大值和最小值。1、基本类型&#xff1a;short 二进制位数&#xff1a;16 包装类&#xff1a;java.lang.Short 最小值&#xff1a;Short.MIN_VALUE-32768 &#xff08;-2的15此方&#xff09;最大值&#xff1a;Short.MAX_…
阅读更多...
.Net之接口文档精度丢失处理

.Net之接口文档精度丢失处理

目的最近两天在给朋友讲解如何使用ajax调用接口时候&#xff0c;我发现我用swagger调用接口返回的long类型的数据最后几位都变成了0(例如&#xff1a;6974150586715898000)&#xff0c;本来是以为sqlite数据库不支持long类型导致我存进去的数据出了问题&#xff0c;然后我使用接…
阅读更多...
android 访问sqlite,android中访问已有的sqlite数据库

android 访问sqlite,android中访问已有的sqlite数据库

推荐文章每天进步记录一点点话说经常性的操作svn出现各种问题,而度娘一直帮倒忙,是不是很手足无措.有时问题还是要记录下来的.说不定还会有惊喜. 昨天遇到个问题,搜索了一下,发现第一条就是自己写的.惊呆我了,更惊呆我的是,我是在csdn写的,为什么在别的网站看到,完全一模一样..…
阅读更多...
Dnslog在SQL注入中的利用

Dnslog在SQL注入中的利用

参考文献&#xff1a;www.anquanke.com/post/id/98096https://bbs.pediy.com/thread-223881.htm DNSlog在Web攻击的利用 在某些无法直接利用漏洞获得回显的情况下&#xff0c;但是目标可以发起DNS请求&#xff0c;这个时候就可以通过DNSlog把想获得的数据外带出来。 常用情况 S…
阅读更多...
让泛型的思维扎根在脑海——深刻理解泛型

让泛型的思维扎根在脑海——深刻理解泛型

1.前言往往一些刚接触C#编程的初学者&#xff0c;对于泛型的认识就是直接跳到对泛型集合的使用上&#xff0c;虽然微软为我们提供了很多内置的泛型类型&#xff0c;但是如果我们只是片面的了解调用方式&#xff0c;这会导致我们对泛型盲目的使用。至于为什么要使用泛型&#xf…
阅读更多...
fgetcsv()函数

fgetcsv()函数

fgetcsv()函数。fgetcsv()函数可以读取指定文件的当前行&#xff0c;使用CSV格式解析出字段&#xff0c;并返回一个包含这些字段的数组。语法格式如下&#xff1a;array fgetcsv(resource $handle [, int $length [, string $delimiter [, string $enclosure[,string $escape]]…
阅读更多...
android 系统ui修改器,分享两个效果 - Android 系统 UI 管理

android 系统ui修改器,分享两个效果 - Android 系统 UI 管理

SystemUIManage.gifDimming the System Bars (沉浸模式)知乎 和 Medium 中都使用到了这个效果&#xff0c;作为沉浸式阅读模式。// This example uses decor view, but you can use any visible view.View decorView getWindow().getDecorView();int uiOptions View.SYSTEM_U…
阅读更多...
打游戏要存进度-备忘录模式

打游戏要存进度-备忘录模式

打游戏要存进度-备忘录模式 学习自 《大话设计模式》 备忘录模式漫谈 备忘录的这种设计思想是非常常见的&#xff0c;比如说围棋游戏的悔棋&#xff0c;绘图软件的撤销功能等等&#xff0c;都或多或少的使用了备忘录模式来处理对象的状态。 备忘录(Memento): 在不破坏封装性的前…
阅读更多...
（10.1）Python学习笔记二

（10.1）Python学习笔记二

1、在项目工程中要模块化测试一个开发的功能&#xff0c;在测试通过后交付给项目组其他人员继续开发。要保证代码开发的性能和效率以及可扩展性。 2、项目工程中的文件夹分类要功能模块明确清晰&#xff0c;在python中引入某一个 文件夹下的文件可以使用如下方式&#xff1a; t…
阅读更多...
利用lay-ui结合ajax实现分页功能(不借助框架,简单易懂)

利用lay-ui结合ajax实现分页功能(不借助框架,简单易懂)

效果图: 1.创建html页面 01.html(前台文件) 2.创建index.php(后台文件) ------------------热身结束,开始正式分页之旅------------------ 3.在html页面中引入layui需要用到的css以及js,还有我们自己额外需要用到的jquery 4.在html文件中,将基本的分页栏显示出来 5.好啦,htm…
阅读更多...
Linux系统压缩及解压缩

Linux系统压缩及解压缩

Linux系统解压缩概述&#xff1a;本篇将介绍Linux系统中的压缩和解压缩的工具&#xff0c;以及归档工具&#xff08;tar&#xff0c;cpio&#xff09;compress/uncompress&#xff1a;对应 .Z 结尾的压缩格式文件&#xff1b;gzip/gunzip&#xff1a;其对应的是 .gz 结尾的压缩…
阅读更多...
酷派手机android版本,系统版本迎来升级

酷派手机android版本,系统版本迎来升级

系统版本迎来升级这个应该是两个版本之间最大但是却不那么直观的不同了&#xff0c;因为从TD版酷派大神F1采用的CoolLife UI 5.0版本&#xff0c;再到联通版酷派大神F1所搭载的CoolLife UI 5.5版本&#xff0c;它们之间经历了一个比较不错的升级。在图标ICON&#xff0c;功能设…
阅读更多...
学习RUNOOB.COM进度一

学习RUNOOB.COM进度一

了解MongoDB 由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 特点 面向文档&#xff0c;操作简单容易 设置任何索引&#xff0c;实现更快排序 本地或者网络创建数据镜像&am…
阅读更多...
最终用户计算安全——特权访问控制

最终用户计算安全——特权访问控制

本篇算是系列的第二篇&#xff0c;之前写了一篇关于勒索软件攻击的&#xff0c;坦白说写这样的文很费脑子&#xff0c;而且喜欢看的读者估计也不多…不过我觉得整理一下思路&#xff0c;对于通过最终用户计算产品或方案来提升组织安全还是有很大的意义的。所以一边喝着清茶吃着…
阅读更多...
MVC学习九：MVC 特性本质

MVC学习九：MVC 特性本质

一、特性的本质就是&#xff1a;对属性、方法、类加特性&#xff0c;本质就是new 一个特性类对象赋值给属性、方法、类。 可以通过反射的方式取得特性的值&#xff0c;代码如下&#xff1a; ①自定义特性 public class MyAttribute:Attribute{public string Name { get; set; }…
阅读更多...
php实现目录及目录文件下的遍历

php实现目录及目录文件下的遍历

效果图: 代码:
阅读更多...
最新文章

Copyright @ 2022~2023