使用chrom浏览器Network查看前后台数据传输请求
  • 写在最前面
  • 查看前后台数据传输请求
  • ① 首先,打开开发者工具(F12)打开控制台,切换到Network面板。
  • Network面板
  • 右键界面
  • copy
  • ②清空请求log ctrl+e两次或者点击clear图标
  • 案例展示:



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


🌈你好呀!我是 是Yu欸

🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长!


写在最前面

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

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

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

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

参考:

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

查看前后台数据传输请求

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

① 首先,打开开发者工具(F12)打开控制台,切换到Network面板。

Network面板

【前端】使用chrom浏览器Network,查看前后台数据传输请求_笔记_02

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文件

②清空请求log ctrl+e两次或者点击clear图标

③触发请求操作
比如:刷新页面,进行一次数据请求。
比如:提交一次表单,进行一次数据提交请求。

④在Network面板中,可以看到所有的网络请求,找到对应的接口请求。
点击该请求,可以在右侧看到本次请求的详细信息。
在请求的详细信息面板中,可以查看请求的URL、请求的方法、请求头、请求参数等信息。

【前端】使用chrom浏览器Network,查看前后台数据传输请求_笔记_03

最重要的是,在Response选项卡中可以看到服务器返回的数据。可以根据返回的数据结构来修改前端代码。

通过查看Network面板的请求信息和返回数据,可以大致了解接口返回的数据结构。如果返回的是一个数组,则对应的数据应该是一个对象数组;如果返回的是一个对象,则对应的数据应该是一个对象。

根据返回的数据结构,可以修改前端代码中的数据绑定和展示逻辑。

案例展示:

新增数据,在Preview选项卡中就是返回对象

首先清空字段,然后触发字段相关请求。我这里提交了一次表单。
然后找到这次操作对应的接口请求。

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

我这次操作的是第一条数据,所以点开list0的详情,找到传值对应的字段,就是我们需要修改的字段啦

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

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


hello,我是 是Yu欸 。如果你喜欢我的文章,欢迎三连给我鼓励和支持:👍点赞 📁 关注 💬评论,我会给大家带来更多有用有趣的文章。