【浏览器】浏览器控制台 Mock 响应数据，更改页面显示内容

Hemri_

已于 2023-12-12 16:23:17 修改

阅读量2.3k

点赞数 8

文章标签： edge浏览器网络前端 javascript

于 2023-12-12 16:12:27 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Hemri2580/article/details/134952008

版权

本文介绍如何在浏览器控制台中模拟（mock）响应数据，以更改页面显示内容。通过右键替换网络请求的响应数据，保存后在刷新页面，可以观察到页面根据修改后的数据更新。此外，介绍了如何停用本地数据恢复到原始状态，并提供控制台命令来便捷地修改DOM节点内容，方便前端开发测试。

摘要由CSDN通过智能技术生成

一、mock

有时候后台返回的数据可能不是想要的数据或缺失想要的字段，这个时候就可以直接操作浏览器的控制台 netWork 选项，进行数据的模拟。比如改写下图中的数据内容。
页面内容：
在这里插入图片描述

对应控制台响应数据：
在这里插入图片描述

1、右键替换内容

在这里插入图片描述

2、编辑数据后保存即可，下次再次调用该接口时，会优先走本地修改的数据。

在这里插入图片描述
可以直接 ctrl+x 到编辑器中更改后在粘贴回来也行。

3、刷新页面

可以看到页面数据已被修改

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。