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

一、mock

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

对应控制台响应数据：

1、右键替换内容

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

可以直接 ctrl+x 到编辑器中更改后在粘贴回来也行。

3、刷新页面

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

控制台左侧对应接口前面有一个紫色小点，代表走的是本地数据。

4、停用本地数据

源代码中取消勾选本地替换即可

二、命令

控制台输入以下其中一个命令，点击页面上的任何地方，都可以修改了。比如你要测试一个DOM节点文字太长时，样式是否会混乱，或者要去直接修改页面元素去满足一些业务需求时。
1、

document.body.contentEditable="true"

2、

document.designMode = 'on'