长春建站网站建设,wordpress 官网主题,传媒公司排名,网建设门户网站记录网络请求 默认情况下#xff0c;只要DevTools在开启状态#xff0c;DevTools会记录所有的网络请求#xff0c;当然#xff0c;记录都是在Network面板展示的。 停止记录网络请求 点击Stop recording network log红色图标#xff0c;当它变为灰色时#xff0c;表示DevT… 记录网络请求 默认情况下只要DevTools在开启状态DevTools会记录所有的网络请求当然记录都是在Network面板展示的。 停止记录网络请求 点击Stop recording network log红色图标当它变为灰色时表示DevTools不在记录请求在Network面板下CommandE(Mac)或者CtrlE(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 workersPWA(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 DurationWaterfall如下图所示 注上图中的不同颜色代表不同的文件类型如js、img、css等。每个请求的瀑布流图像都分为浅色部分和深色部分浅色部分表示等待时间深色部分表示下载时间如上图中129ms是等待时间110ms是下载资源所用的时间。 分析请求 查看请求记录 请求表默认显示以下列 Name文件的名字或者资源的标识符StatusHTTP状态码Type请求资源的MIME类型 Initiator以下对象或处理可以发起一个请求 ParseChrome的HTML解析器RedirectHTTP重定向Scriptjs函数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.1StalledQueueing中的任何一个因素发生都会导致该请求被拖延Proxy negotiation浏览器与代理服务器协商消耗的时间DNS Lookup浏览器对请求的IP地址进行DNS查找所消耗的时间Initial conncection发起连接所消耗的时间Request sent请求发送消耗的时间Waiting (TTFB)浏览器等待响应的时间TTFB表示 Time To First ByteContent 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列多了一行灰色的文字表示请求等待响应的时间
