当前位置：首页 > news >正文

【前端】使用chrom浏览器Network，查看前后台数据传输请求

news 来源：原创 2024/9/17 4:35:19

使用chrom浏览器Network查看前后台数据传输请求

写在最前面
查看前后台数据传输请求
- ① 首先，打开开发者工具（F12）打开控制台，切换到Network面板。
- - Network面板
  - 右键界面
  - copy
- ②清空请求log ctrl+e两次或者点击clear图标
案例展示：

请添加图片描述

🌈你好呀！我是是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

写在最前面

为了进行前端页面的优化，需要修改代码。

然而，由于缺乏接口文档，无法准确了解原来绑定的数据的结构，即它是一个数组还是一个字符串。

为了解决这个问题，老师教我：可以使用Chrome浏览器的Network面板来查看前后台数据传输请求，以便获取接口返回的数据结构。

通过查看请求详情和返回的数据，我们可以大致了解数据的结构，从而进行代码的修改和优化。

参考：https://blog.csdn.net/ningmengban/article/details/118738013
https://blog.csdn.net/museions/article/details/75144263

更多有意思的：
[性能优化] 浏览器中观测 network 性能数据的 3 种方式

查看前后台数据传输请求

使用Chrome浏览器的Network面板可以查看前后台数据传输请求，进而得到接口返回的数据结构。

① 首先，打开开发者工具（F12）打开控制台，切换到Network面板。

Network面板

在这里插入图片描述

ALL：显示所有请求
XHR：显示AJAX异步请求
JS：显示js文件
CSS：显示css文件
Img：显示图片
Media：显示媒体文件，音频、视频等
Font：显示Web字体
Doc：显示html
WS：显示websocket请求
Other：显示其他请求

Preserve log：保留请求记录
勾选之后，刷新页面不会清空之前的请求记录
No throttling：设置模拟限速

网络设置：
User agent：属于 http 请求头一部分。表示所用浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。
Accepted Content-Encodings：服务端压缩格式

右键界面

Open in new tab：在新的标签中打开链接
Clear browser cache：清空浏览器缓存
Clear browser cookies：清空浏览器cookies
Copy：复制
Block request URL：拦截当前请求url
Block request domian：拦截当前域名下所有请求
Replay XHR：重新请求AJAX
Sort By：排序请求
Header Options：显示请求头选项
Save all as HAR with content：保存所有请求为.har文件

copy

Copy Link Address：复制资源url到系统剪贴板
Copy Response：复制HTTP响应
Copy stack trace：复制堆栈信息
Copy as PowerShell：复制请求PwoerShell代码
Copy as fetch：复制请求fetch代码
Copy as Node.js fetch：复制请求Node.js fetch代码
Copy as cUrl（cmd）：复制请求cUrl 命令代码
Copy as cUrl（bash）：复制请求cUrl 命令代码
Copy all as PowerShell：复制所有请求PwoerShell代码
Copy all as fetch：复制所有请求fetch代码
Copy all as Node.js fetch：复制所有请求Node.js fetch代码
Copy all as cUrl（cmd）：复制所有请求cUrl 命令代码
Copy all as cUrl（bash）：复制所有请求cUrl 命令代码
Copy All as HAR：复制所有请求HAR文件