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

已于 2023-12-12 16:23:17 修改
阅读量1.4k 收藏 12
点赞数 8
文章标签： edge浏览器 网络 前端 javascript
于 2023-12-12 16:12:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hemri2580/article/details/134952008
版权

一、mock

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

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

1、右键替换内容

在这里插入图片描述

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

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

3、刷新页面

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

最低0.47元/天 解锁文章
Hemri_
关注
  • 8
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue-cli项目中怎么使用mock数据
08-27
在浏览器输入 `http://localhost:8080/api/posts`，可以看到 Mock 数据的响应。 结论 在 Vue CLI 项目中使用 Mock 数据可以模拟后端 API 的响应，方便前端开发和测试。本文介绍了如何在 Vue CLI 项目中使用 Mock ...
基于python的mock测试数据练习
08-15
本练习主要关注如何使用 `unittest.mock` 进行mock测试数据。 一、Mock对象的基本概念 Mock对象是模拟真实对象的一种工具，它可以在测试中替代真实的对象，以避免测试过程中对实际数据或外部服务的依赖。Mock对象...
浏览器修改接口返回数据展示在页面上
qq_41154522的博客
03-07 944
前端自己调试，想修改接口返回来的数据，然后展示在页面上。
修改网页内容，随心所欲改变网站显示内容
热门推荐
晴天有点孤单
09-03 2万+
javascript:document.body.contentEditable=’true’;document.designMode=’on’;void o然后回车，你就可以随心所欲的修改这个网站啦！输入如下代码，将退出编辑状态！javascript:document.body.contentEditable=’false’;document.designMode=’on’;void o
浏览器修改后端返回值
最新发布
rechel000的博客
05-29 879
浏览器修改后端返回值
终于，用浏览器就能mock请求了
IT界那些事儿
09-15 2426
在最近发布的Chrome 117中，更新了很多调试相关功能，比如 —— 前端可以利用面板轻松mock请求。本文让我们看看这次更新都有哪些有用的新特性。首先，本地覆盖功能更加简化，你可以在没有访问权限的情况下，通过面板轻松地模拟远程资源的响应头和网页内容。千万别小看了这个不起眼的功能，有了它之后，我们可以做很多事情，例如：直接调试线上的代码（图像、字体、fetch和XHRJavaScript、CSS 等）快速切换不同的调试环境（本地、预发、线上）屏蔽某些网站广告，修改背景色等。
获取浏览器Response响应文本(C#)
zxy13826134783的博客
04-02 3550
有时候我们需要获取某个url的响应文本，如下载浏览器的视频流并合成完整的视频，最具有代表性的是.m3u8格式的文件，它包含有视频流的下载信息，如下图： 下面以获取该响应文本为例进行演示 步骤： 1 新建一个控制台项目，名为获取Response响应文本 2 编写代码如下： using System; using System.Collections.Generic; ...
神奇的代码——可随意修改复制页面内容
ZShiJ的博客
12-20 2358
需要注意的是，这段代码只能在支持JavaScript的浏览器中运行，并且需要具有足够的权限才能修改网页内容。进入开发者模式：在大多数浏览器中，你可以通过按下F12键或右键单击页面并选择"检查"来进入开发者模式。是一个JavaScript代码，用于将文档的模式设置为可编辑模式。这段代码是用于在网页中以可编辑模式打开原始页面的JavaScript代码。输入命令：在控制台中，你可以输入任何有效的JavaScript代码。这意味着你可以在控制台中直接编辑网页的内容，就像在Word文档中一样。
全网最细，Fiddler修改接口返回数据详细步骤实战，辅助接口测试...
大佬云集技术答疑交流群：743262921(进群暗号:222)
08-06 5305
在测试的过程中，有的需求是这样的，它需要你修改接口返回的数据，从而检查在客户端手机app内是否显示正确，这也算是一种接口容错测试，接口容错测试属于app性能（专项）测试的其中一种。通过Fiddler我们可以有好几种方法修改返回结果：第1种：在Fiddler底部的黑色命令行显示区域通过bpu url的形式按回车之后进行拦截，通过手机app访问指定接口，拦截到后可以选择response文件后通过拦截；
Fiddler模拟请求发送和修改响应数据
软件自动化测试技术交流、资源分享
04-06 1964
fiddler模拟伪造请求1、浏览器页面填好内容后（不要操作提交），打开fiddler，设置请求前断点，点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests”2、在页面上点击“提交”，提交数据；此时首先做的是一跳转；返回fiddler，点击”Break on Response”和”Run to Completion”，3、在“fiddler”,修改数据，点击”Break on Response”,将请求提交至服务器；
如何用Fiddler修改请求、响应数据
weixin_44901808的博客
05-25 2万+
如何用Fiddler修改请求、响应数据
详解vue-cli 本地开发mock数据使用方法
08-27
5. 如果需要修改或增加 Mock 数据，只需更新 `db.json` 文件即可。 在某些场景下，手动构造 Mock 数据可能效率较低，这时可以使用 `faker.js` 这个库来批量生成伪数据。`faker.js` 提供了大量的预定义函数，可以...
vue-cli项目中怎么使用mock数据
11-26
在Vue.js项目中，特别是在使用Vue CLI（Vue脚手架工具）构建的项目中，有时候我们需要在开发阶段使用mock数据来模拟服务器响应，以便于快速验证应用的功能和界面。使用mock数据可以避免在开发过程中频繁地与真实后端...
vue+koa2搭建mock数据环境的详细教程
11-20
前段时间写了一篇前端vue项目实现mock数据方式的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock...
Mock随机生成数据（浏览器环境）
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
09-10 1192
https://github.com/nuysoft/Mock/wiki/Syntax-Specification 首先链接jquery.js然后接入moke.js， 在moke文档，Random.region()，可直接用@region() 扩展： 自定义数据： var Random = Mock.Random Random.extend({ "xingzuo": f...
如何修改网页的页面内容
qq_43406338的博客
08-21 2988
1.火狐浏览器任意页面按F12键 2.点击控制台 3.输入 document.body.contentEditable='true'
一行代码就能随意修改网页内容
web全栈开发的博客
09-02 1万+
一、打开你想要编辑的网站 我这里拿百度首页做个示范。 二、进入开发者模式 按F12进入开发者模式 。 三、输入神奇代码 1、打开随意编辑网页内容的功能 选择Console，在命令框输入document.designMode='on'后按回车。 这时你可以发现，点到文字处，会出现小光标，这就说明你可以修改这里的内容。 此时直接就可以修改光标处的内容，这里我随便改一下（不是真的改，刷新页面即可恢复原来网页内容）。 2、关闭随意编辑网页内容的功能 选择Console，在命令框...
postman怎么修改响应体mock数据
04-01
要修改响应体 mock 数据，可以按照以下步骤操作： 1. 打开 Postman，进入请求的响应体 mock 数据页面。 2. 在响应体 mock 数据页面中，可以看到响应体的模板内容以及可以修改的字段。 3. 选中需要修改的字段，双击进入编辑模式，修改完毕后按下 Enter 键即可保存修改。 4. 修改完成后，可以点击“保存”按钮保存修改后的响应体 mock 数据。 5. 再次发送请求时，就可以看到修改后的响应体 mock 数据了。 注意事项： 1. 在修改响应体 mock 数据时，需要注意修改的内容是否符合数据类型和格式要求。 2. 修改后的 mock 数据只会在当前请求中生效，不会影响其他请求的 mock 数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值