（前端调试工具）ReRes映射

安装ReRes插件(需要FQ): https://chrome.google.com/webstore/detail/reres/gieocpkbblidnocefjakldecahgeeica?hl=zh-CN&gl=CN

其他方法安装：百度

前端开发过程中，经常会有需要对远程环境调试的需求。比如，修改线上bug，开发环境不在本地等等。我们需要把远程css文件或者js映射到本地的文件上，通过修改本地文件进行调试和开发

ReRes就是居于这个目标写出来的，您可以把请求映射到其他的url，也可以映射到你本机的文件或者目录。ReRes支持单个url映射，也支持目录映射。

是不是感觉很爽；

例子1: 改变百度的按钮样式，

效果图：

1.在桌面新建一个demo.css文件 ;

2.把百度首页引入的soutu.css样式拷贝到demo.css;

3.写正则:

^https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/css/soutu.css

file:///C:\Users\Lenovo\Desktop\demo.css

ReRes正则写法规则推荐： https://github.com/annnhan/ReRes;

4.检查是否映射成功;

5.添加样式

#su.s_btn {
	color: #000;
	background: green;
}

例子2: 项目中使用

一般项目都测试环境如，本地，内网测试，线上测试，

我们开发测试流程是:本地 ---> 内网测试 ---> 线上测试 --> 生产,

一般代码都在本地调试，

有些情况需要在:内网测试,线上测试,生产,特别是生产怎么可能给你乱搞，

下面是线上测试项目结构

├─dist_stg	 // 线上测试
│  ├─css
│  ├─images
│  ├─js			
│  │  ├─module
│  │  └─plugin
│  └─theme     
│      ├─activity_chlj
│      │  └─css
│      └─default
│          └─css

现在拿线上测试环境举例：

如线上测试环境域名：www.baidu.com

本地代码位置：F:\crt\crt_wap\dist_stg

正则如下：

^www.baidu.com/css/index.js

file:///F:\crt\crt_wap\dist_stg\css\index.js

这个是映射一个inde.js,文件

^www.baidu.com/js

file:///F:\crt\crt_wap\dist_stg\js

这样就是映射一个文件夹，如果你请求的www.baidu.com/js/index.js,它对应的文件是F:\crt\crt_wap\dist_stg\js\index.js

我一般在什么情况下使用;

(1)有项目的代码，环境没有搭建(有些项目搭建环境要很久，什么虚拟机，linux，nginx ...。)

(2)希望在线上调试。或其他环境调试

主意：映射html文件，显示的是源码，

但是可以这样映射

https://www.jd.com

https://www.taobao.com

访问https://www.jd.com 测试一下就知道了