Chrome DevTools — Network 1
记录网络请求
默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然,记录都是在Network
面板展示的。
停止记录网络请求
点击
Stop recording network log
红色图标,当它变为灰色时,表示DevTools不在记录请求在
Network
面板下,Command+E(Mac)
或者Ctrl+E(Windows,Linux)
清除网络请求
跨页面加载时,保留网络请求记录
当页面重载或者页面跳转时,默认情况下,Network
面板下的网络请求记录表也是刷新的。如果想保留之前页面的网络请求数据,可以勾选Preserve log
。
常用的一个应用场景:登录/注册时会调用登录/注册API,开发者想查看这个接口返回的情况,但是登录/注册成功后一般会跳转到新的页面,导致了Network
面板的请求记录被刷新从而看不到登录/注册接口返回的情况。此时勾选上Preserve log
,无论跳转到那个页面,都能在Network
网络请求记录表中查看到之前接口返回的情况。
页面加载时捕获屏幕截图
捕获屏幕截图可以分析在页面加载的过程中,用户在不同的时间段内看到的网页是什么样子的。
点击Capture screenshots
图标开启捕获功能,当图标变为蓝色表示已开启,重载页面即可看到不同时间的屏幕截图。
捕获屏幕截图之后,可以进行以下操作:
鼠标悬浮在一张图片上时,该图片四周会出现一个黄色的边框,同时,在
Overview
和Waterfall
窗口里面也分别有一条黄色的竖线,这条黄色的竖线表示这张图片的捕获时间点击某一张图片,可以过滤掉在这张图片捕获之后发生的所有请求
双击图片,可以放大该图片
改变页面加载时的条件
禁用浏览器缓存
在http请求的过程中,有些资源在页面初次加载之后会被缓存到浏览器中,也就是那些状态码为304的资源。为了尽可能准确地模拟用户第一次加载我们网页时的情景,需要禁用浏览器缓存,这样,每一个请求都是从服务端传送过来的,较为准确地反应出网页初次加载的实际情况。
模拟网速条件
在Network Throttling
下拉框中可以选择不同的网络条件进行模拟,如2G、3G、4G、WiFi等。
除了选中已有的网络选项,也可以自定义网速相关条件:打开Network Throttling
菜单,选择Custom > Add
。
另一种模拟情况较为特殊,就是无网络。利用service workers
,PWA(Progressive Web Apps)在无网络的情况下依然可以使用。模拟这种无网络环境,直接勾选Offline
即可。
提示:有时候开发者会看到Network
左侧有个警告图标,这个图标就是提示开发者当前处于模拟网络条件下。
手动清除浏览器缓存、cookies
在网络请求记录表里面右键,选择Clear Browser Cache
或Clear Browser Cookies
。
覆盖用户代理
打开Network
抽屉面板:在DevTools下,按Esc
键即可调出DevTools的抽屉面板,可以选择、切换不同的Tab选项。
Network
抽屉面板打开以后,不勾选Select automatically
复选框,然后选择一个用户代理或者自定义一个。
过滤请求
根据属性过滤
那个漏斗,对,就是它,点击漏斗图标使其颜色变为蓝色,然后就可以对网络请求表中的数据进行进一步的过滤。
在输入框中可以输入一些字符串、域、大小、状态码、媒体类型等等,如果业务比较简单,可能输入一些字符串就搜索到自己想要的结果了。可输入的详细类型可参考官方文档。
根据类型过滤
这里是可以多选的:按住Command(Mac)
键或Ctrl(Windows,Linux)
键,然后单击不同的类型,如点击JS
和Img
,则过滤出js文件和图片。显然,All
不与其他类型共存,选择All
的时候不能再选某一个具体类型。
隐藏data URLs
data URLs
指一些嵌入到文档中的小型文件,在请求表里面以data:
开头的文件就是,如较为常见的svg文件。勾选Hide data URLs
复选框即可隐藏此类文件。
根据时间过滤
点击下图中绿色方框的图标,显示/隐藏Overview
窗口。在Overview
窗口分别拖动左边或右边橙色圆圈中的滑动条,就可过滤出位于两个滑动条之间这段时间发出的请求,不是在这段时间发出的请求就被隐藏掉了。
对请求表进行排序
按照列的类型排序
点击请求表每一列的列头,即可按照相应的类型进行排序,如,点击Size
,则可按照资源从小到大或者从大到小(点击Size
自动切换)进行排序。
按照请求的不同阶段排序
在请求表的列头右键,然后鼠标移动到Waterfall
,然后选择以下选项,默认按照对应时间从短到长的顺序排列:
Start Time
:请求开始的时间(默认)Response Time
:资源开始下载的时间End Time
:请求结束的时间Total Duration
:请求的整个持续时间(发起至下载结束)Latency
请求等待响应的时间
比如,选择了Total Duration
,Waterfall
如下图所示:
注:上图中的不同颜色代表不同的文件类型,如js、img、css等。每个请求的瀑布流图像都分为浅色部分和深色部分,浅色部分表示等待时间,深色部分表示下载时间,如上图中129ms是等待时间,110ms是下载资源所用的时间。
分析请求
查看请求记录
请求表默认显示以下列:
Name:文件的名字或者资源的标识符
Status:HTTP状态码
Type:请求资源的MIME类型
Initiator:以下对象或处理可以发起一个请求
Parse:Chrome的HTML解析器
Redirect:HTTP重定向
Script:js函数
Other:一些别的处理或操作,比如通过链接导航到一个页面,或者是在浏览器的地址栏输入一个地址然后回车
Size:响应头大小+响应体大小
Time:总的持续时间,从发起请求到资源下载完成
Waterfall:每一个请求活动的不同阶段的可视化展示
增加或者删除列
在请求表的头部右键选择一个选项使其显示或隐藏。
增加自定义的列
在请求表的头部右键,Response Headers > Manage Header Columns
查看请求时间
在Waterfall查看某个请求相对于其他请求所消耗的时间长短及先后顺序。默认是以请求发起的时间排序的,所以,瀑布流中,越靠左的请求,发起的时间越早。
Headers:查看请求头、响应头以及请求参数
在列Name下,点击某个请求的URL,可以查看到请求、响应的详细内容。
默认情况下,请求、响应头是按照字母表顺序显示的http头部的名字,如果想按照实际接收的顺序显示,点击上图中的view source,反之点击上图中的view parsed。
在Headers选项卡中也可查看请求的参数,上图橙色方框部分。也有view source和view parsed,另外还有参数编码格式(view URL encoded)和解码格式(view decoded)。
Preview:查看响应体的预览
Response:查看响应体
Cookies:查看cookies
Timing:查看请求在各个阶段对应的时间
各个时间段的意思:
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
键,然后鼠标悬浮在某个请求上,该请求的发起对象由绿色标志,该请求的依赖对象由红色标志。
查看加载事件
DevTools在多个地方显示了DOMContentLoaded
和load
事件发生时对应的时间。DOMContentLoaded
事件对应蓝色的线(或者文字),load
事件对应红色的线(或者文字)
查看请求的总数量和总大小
注:这里的数据表示DevTools打开以后被记录的请求所对应的数据,如果有些请求在DevTools打开之前已经发生了,这些请求的数据是不计算在这里面的。
改变Network
面板的布局
过滤器的显示隐藏(已经介绍)
Overview窗口的显示隐藏(已经介绍)
请求表有简版和详细版两种不同的显示,默认是简版
点击下图中的图标,可切换两种显示方式。图标为蓝色时表示详细版,为灰色时表示简版。
下面我们来看看两种显示方式的差异:
其实详细版就是多提供了一部分信息:
Name列多了一行灰色的文字,表示该资源的路径
Status列多了一行灰色的文字,表示HTTP状态码对应的文本
Initiator列多了一行灰色的文字,表示发起对象类型
Size列多了一行灰色的文字,表示该资源的实际大小
Size列的第一行数据表示请求头和请求体的大小之和,由于HTTP请求的多样,会导致第一行数据的大小和第二行数据大小的不同,有可能第一行的数据比第二行的数据大,也可能第一行的数据比第二行的数据小,一般有以下几种原因:有响应头,甚至包含cookie(第一行 > 第二行)
请求被缓存了(一般情况下,第一行 < 第二行)
服务端gizp压缩(一般情况下,第一行 < 第二行)
Time列多了一行灰色的文字,表示请求等待响应的时间
Chrome DevTools — Network 1相关推荐
- Chrome DevTools — Network
https://www.cnblogs.com/zhaoyihao/p/7390374.html 记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然, ...
- Chrome DevTools 之 Network,网络加载分析利器
虽然一直在用Chrome DevTools,但大多停留在常用的功能和调试上,比如Elements/Network/Sources/Console等主要功能,而对于性能分析/优化相关的Timeline/ ...
- 前端神器—Google Chrome Devtools细节详解
本人是一位没出实习期的前端小菜鸟一枚,这几个月发现了Google Chrome Devtools的易用性非常高的小功能和小细节 特意分享给大家.欢迎大家收藏+点赞.新人需要鼓励哈哈 内容和图片均为原创 ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- 你不知道的 20+ Chrome Devtools 技巧!
你不知道的 20+ Chrome Devtools 技巧! 谷歌Chrome是目前开发者使用的最流行的网络浏览器之一.根据StatCounter的统计,截至2019年9月,谷歌Chrome浏览器在全球 ...
- 2021 Chrome Devtools 新特性
目录 基础教程 新特性哪里来的 Chrome 96 Chrome 95 1. CSS的长度单位可直接更换 Chrome 94 1. 支持更换80种语言 2. 设备列表新增Nest Hub 设备 3. ...
- 手机Web前端调试页面之——Chrome DevTools(谷歌浏览器)的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试 前言 在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...
- 学习Chrome Devtools 调试
前言(共分2部分内容) 常用命令和调试 黑盒脚本:Blackbox Script 控制台内置指令 远程调试WebView 1. Chrome Devtools 的用处 前端开发:开发预览.远程调试.性 ...
- Chrome DevTools 使用详解
[转自:https://segmentfault.com/a/1190000007877846] 基本够调试用了!有这么详细文章,真实很感谢作者! 写在前面:Chrome DevTools 系列文章正 ...
最新文章
- 程序员为什么会有职业瓶颈?
- PhpStorm 默认快捷键
- No MyBatis mapper was found in ‘[xx.mapper]‘ package. Please check your configuration
- java B2B2C springmvc mybatis电子商务平台源码-消息队列之RocketMQ
- 百度顶会论文复现(3):视频分类综述
- spring-cloud-dependencies的Edgware.RELEASE版本问题
- 【转载】学习Android界面设计的超级利器HierarchyView.bat
- spark记录(7)SparkCore的调优之数据倾斜调优
- 微信公众平台开发(1)--账号注册流程图文详解
- 七周成为数据分析师教程
- 编写一个能将给定非负整数列表中的数字排列成最大数字的函数。
- python入门笔记——类和对象③(案例:自动随机文字游戏——决战紫禁之巅)
- 自制 APP Inventor 蓝牙接收数据接收模板 自制遥控小车App的必经之路~
- 微博+java平台_【基于JavaEE的微博平台设计最终版材料】
- 在 Mac 上多开微信,还能看到朋友撤回的信息:WeChatTweak - 少数派
- QrCode类生成二维码海报
- C语言 宏定义练习:计算平方
- Torch 训练的一些注意点:优化器params参数 与 lr 调度器篇 [1]
- C++从0到1入门编程
- vcd文件中存储多维数组 vcs_VCS课时4: 使用VCD文件进行后处理
热门文章
- 更换密码之后连不上数据库
- UVA - 11732 strcmp() Anyone?左兄弟右儿子trie
- sqlite mysql pgsql_比较MySQL,PostgreSQL和SQLite中的数据库列类型?(跨图)
- mysql几个timeout参数_MySQL中 timeout相关参数解析
- Linux LED驱动开发实验(直接操作寄存器 -- 实际开发很少这样做)
- 系统烧写方法(MfgTool烧写工具)
- Vim的使用和快捷键介绍
- 男生学计算机哪专业好,男生学计算机科学与技术专业好不好有前途吗
- Dubbo的RPC原理
- mysql错误Please use SHOW DDL to check it, and then recover or rollback it using RECOVER DDL or ROLLBAC