背景介绍

作为一名前端开发工程师，对于大部分人来说，每天最长时间面对的软件有两个，一个是VSCode，一个是Chrome浏览器。特别是Chrome，作为我们代码的运行环境，对它的理解越深入，使用的越熟练，带来的开发效率的提升就会越明显。

今天我们介绍一个Chrome的插件，叫做ReRes(Change the response of the request)，Github地址。简单解释，这个插件可以实现将浏览器请求重定向到其他资源，可以是一个在线地址，也可以是本地文件，基本实现了Fiddler等工具的代理功能。按照作者的说法，简单，打开浏览器就能用、支持目录映射和文件映射、跨平台。

安装

应用市场

地址：chrome.google.com/webstore/de…

直接进入，点击安装插件即可。

crx包安装

链接: pan.baidu.com/s/17GZSBuay… 提取码: 8imz

Chrome右上角...，更多工具-》扩展程序，打开右上角 开发者模式，然后将下载的crx文件拖入页面中，就会自动安装。

应用场景

前后端不分离联调

现在比较流行的开发方式是前后端分离，登录状态维护使用jwt方案，前端可以自己起一个Nodejs服务进行开发，通过登录接口获取token，在ajax请求的header中携带token进行用户校验。

但是一些比较老的项目，登录状态是通过后端返回的一个sessionid，注册到cookie中，每次ajax请求，通过cookie自动携带到服务端进行校验。在cookie相关文档中提到cookie是不能跨域访问的，所以我们本地起得nodejs服务域名是localhost，接口的域名可能是demo.com，存在跨域。

如果服务端不进行调整，前端在本地开发的时候，就需要依赖服务端环境，本地部署一套php或者java，似乎不是我们前端开发所期望的。这时候我们就可以，借用ReRes将测试环境的js和css地址代理到本地nodejs服务的js和css地址，然后借助现在Webpack等热更新的插件，达到几乎和前后端分离，本地开发类似的开发体验。

同样的原理，如果我们想调试线上问题，可以使用这种方案，将线上的js直接代理到本地服务地址，就可以直接打断点、debugger，然后调试了。

Mock数据

我们在本地开发的时候，通常需要根据后端提供的接口文档去Mock数据。Mock数据有很多种方法，第一种，在项目中集成Mockjs，直接将接口映射到本地写好的Mock数据上；第二种，可以将Mock数据放在Mock平台上，有些接口文档管理工具自带Mock功能，会提供一个Mock接口的地址。

第二种，我们需要将Mock接口完整地址写到代码中，这肯定是我们所不期望的。解决办法有，使用NODE_ENV等环境变量，来区分环境，使用不同域名前缀，然后代码中保留接口的相对地址即可。比如使用Vue-Cli工具创建的项目，会有.env文件，可以来定义变量，将接口的域名在不同环境区分开，都可以保证代码的纯净，不会因为疏忽，在代码中遗留Mock数据的地址。

还有一种方式是，我们可以使用正式的接口地址，然后通过ReRes来代理到Mock数据地址，或者其他环境的地址，也是非常的方便。

修改网站代码

以下谨慎使用，请用到正确用途中。

之前介绍过一个Chrome插件，叫做tampermonkey，支持将js代码插入到网页中，来实现一些开发者的自定义的逻辑，比如新闻网站去广告，免费下载百度文库文档，等等。但是这种插入代码的方式有时候不够方便，或者需要等待资源加载，存在异步的情况。

我们可以先通过代码分析，找到生成广告的代码，然后将该js下载到本地进行修改，使用ReRes去代理到本地的js，来达到你想要的结果，这种方式需要阅读网站的源码，复杂度大大提升，但是可定制性更强，甚至可以修改原来网站的逻辑，如果不正确的使用，可能会走上不合法的道路，比如去爬取数据。