【计算机网络】使用Chrome的Network面板分析HTTP报文
谷歌的文档 https://developers.google.com/web/tools/chrome-devtools/network/
快捷键 Control+Shift+l(Windows)or Command+Option+l(Mac)
Chrome抓包：Network面板
过滤器 ： 过滤请求下方请求列表中的东西
概览： 以图形化的方式来显示请求的相关信息
请求列表 显示了所有的请求，点击请求 会出现详细的内容
概要 显示抓取了多少的内容，还有信息等
具体如下：
详细来看
控制器模块：
过滤器：按类型
注意最后一项： 可以使小文件以BASE64位格式嵌入HTML中 来减少HTTP
过滤器： 属性过滤（一）
输入框输入
第二个距离可以使 setCookie
多属性间通过空格实现AND操作
请求列表的排序
请求列表（一）
- Name：资源的名称
- Status:HTTP 状态代码
- Type：请求的资源的MIME类型
Type显示的是视频类型的文件，js文件还是别的类型的文件
请求列表（二）
Initiator：发起请求的对象或进程。它可能有以下几种值：
- Parser（解析器）：Chrome的HTML解析器发起了请求
· * 鼠标悬停显示JS脚本 - Redirect（重定向）：HTJP重定向启动了请求
- Script（脚本）：脚本启动了请求
- Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址
请求列表（三）
- Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
- Time：总持续时间，从请求的开始到接收响应中的最后一个字节
- Waterfall:C各请求相关活动的直观分析图
预览请求内容（一）
- 查看头部
- 查看 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键悬停请求上，绿色是上游，红色是下游
上游和下游 举个例子：有一个html页面为上游 里面出现了图片的连接 之后的图片就是下游
浏览器加载时间
触发流程：
- 解析HTML结构
- 加载外部脚本和样式表文件
- 解析并执行脚本代码/∥部分脚本会阻塞页面的加载
- DOM树构建完成/∥DOMContentLoaded事件
- 加载图片等外部文件
- 页面加载完毕/∥load事件
请求时间详细分布（一）
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：浏览器正在读取之前收到的本地数据
【计算机网络】使用Chrome的Network面板分析HTTP报文相关推荐
- 如何使用Chrome的Network面板分析HTTP报文
Chrome教程之NetWork面板分析网络请求 如何使用Chrome的Network面板分析HTTP报文
- Chrome教程（一）NetWork面板分析网络请求
1.如何打开 无论是在Windows还是Mac,都可以使用(FN)+F12键打开Chrome的Network面板. 2.面板组成 如图所示,Chrome的Network面板主要由5个部分组成,包括控制 ...
- Chrome浏览器开发者工具介绍；（包括，Network面板介绍，XHR等等）
为什么写了这篇博客: (1)原因一 在[OA系统二十三:请假审批四]这篇博客中,加载[请假审批这个内嵌页面]后,这个内嵌页面中需要显示[待审批请假数据]的列表数据,而这些列表数据,是通过ajax请求从 ...
- Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板. ...
- chrome开发者工具--使用 Network 面板测量您的网站网络性能。
转自:Tools for Web Developers Network 面板记录页面上每个网络操作的相关信息,包括详细的耗时数据.HTTP 请求与响应标头和 Cookie,等等. TL;DR 使用 ...
- Chrome DevTools的Network面板
Network 面板记录页面上每个网络操作的相关信息,包括详细的耗时数据.HTTP 请求与响应标头和 Cookie,等等. Network 面板概览 Controls.使用这些选项可以控制 Netwo ...
- chrome浏览器开发者工具network面板过滤、隐藏指定的请求
在我的这篇文章中介绍了,怎么在开发者工具network面板中屏蔽请求,但是屏蔽请求的意思是这个请求不会再发出去,如果是功能性请求,直接屏蔽掉会影响功能,所以我们一般很少用到. 我们常用的方法其实是过滤 ...
- Chrome DevTools — Network
https://www.cnblogs.com/zhaoyihao/p/7390374.html 记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然, ...
- Chrome DevTools — Network 1
记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然,记录都是在Network面板展示的. 停止记录网络请求 点击Stop recording netw ...
最新文章
- Web3与智能合约交互实战
- 从QQ聊天看51CTO版主专业精神和工作态度！
- JStorm与Storm源码分析（一）--nimbus-data
- Windos 10 下,应用版ubuntu系统, 访问windos文件系统
- linux以太坊开发环境搭建
- 家庭厨房，如何共享美食？|回家吃饭产品分析
- docker学习笔记-为容器配置重启策略
- bat set命令详解
- 1分钟学会python_快速入门：十分钟学会Python
- BugkuCTF-WEB题速度要快
- 上银伺服驱动器说明书_威海伺服驱动器维修,诚信互利
- ViewPager子类与父类滑动冲突的情况
- 个性化新闻文章推荐的上下文Bandit方法
- python正则表达式提取字符串密码_用python正则表达式提取字符串
- Codeforces 500D. New Year Santa Network
- linux 设备驱动之8250串口驱动分析
- roads 用户体验标准_手持海外通行证，海信激光电视征服全球用户！
- 汉语词典 mdd mdx 下载_三款你必须拥有的英文词典软件
- Office 添加或删除 skype for business、oneNote、OutLook、oneDrive等功能
- [注]打动我的50句广告语