Chrome mock 请求以及回应

Chome 如何 mock 请求及回应

平常我们mock接口或者修改请求或者修改header都是通过fiddler或者charles等工具实现，但是其实chrome已经兼具了这个功能！

Chrome mock 返回内容

修改返回的数据改为特定的值，那么我们可以通过chrome开发者工具的network，在你想要修改的接口上面右击，然后选择Override content

此时浏览器会提示你: 选择一个文件夹进行存储文件， 也就是将你的信息保存到本地，再次请求的时候如果url一样则会走你的本地这个文件的信息

当然，在提示需要DevTools的权限获取的时候需要给予允许！

这时候你就可以看到你可以将返回的信息进行修改了！

下面我们来修改一下！

我将ads之前的数据全部清空，然后我们看一下请求的返回接口

此时我们就看到了已经mock成功了，但是需要注意的是，mock完毕之后记得改回来或者移除mock，因为很长时间忘记后，再次测试可能会让自己觉得是BUG，然后找到开发，最后发现是自己的问题，因为我就出现过，因为无感知！

Chrome mock 返回的response header

会了上面的，那么下面的就很简单了，此时我们打开chrome开发者工具，选择network面板，选择对应的接口，然后右击选择Override headers

此时你会发现，可以在network的Response header下直接进行添加想要的header

也可以通过右侧的headers文件链接进行在文件中的编辑，这里我们以这样的方式举例！这里我们新增一个返回的header，key:value 为testtraceid:11112222333444

再次请求接口，发现已经返回了我们新增的header

如果想要修改已经存在的response header,则只需要增加相同的key即可,例如修改 tracid

可以看到我们已经将存在的header替换成了我们指定的值

Chrome mock的接口会有标识

如果接口被mock则chrome会有一个标识在请求的前面展示，用来标记这个接口是被Mock过的

总结

这个用起来蛮方便的就是在我上面提到的一定在用完后移除，要不然到了后期你在用的时候发现会很懵，为什么我的返回和别人的不一样呢？