利用 线上环境 在 本地 调试代码

为何须要使用线上环境进行代码调试？

在平常的开发中，当接口文档出来的时候，先后端能够独立的进行开发，前端能够经过一些线上的mock工具模拟接口，调通页面，减小联调的时间。

可是在一些条件下，是须要利用线上的环境调试的：

1. 后接口的数据有作了跨域的限制，或者接口须要线上的登陆身份（cookie之类）
2. 再或者已经部署上线的页面出bug了，线下开发没有具体环境调试不了等等。
3. 其余一些利用线上环境调试更加方便的情景

当咱们遇到这些问题时，简单的想法是：先在本地估摸着开发，而后再部署上去线上环境看下结果，而后再接着调试，再部署到线上看下结果......这样子极其繁琐和不方便。此时咱们考虑一下，是否能够利用线上环境进行代码调试？

怎么作呢？

具体的想法就是，当咱们登陆进去线上环境时，线上环境会返回已经部署的代码，在这个过程当中，咱们能够利用抓包工具，把请求线上已经部署的代码请求给拦截下来，替换为本地代码文件返回给浏览器，只要替换的文件一一对应，线上的环境依旧能够正常跑通，由于这个过程对于浏览器来讲，是透明的，因此咱们就至关于把本地代码部署到线上环境了，就能够一边开发一边调试啦~

具体的操做就是：

1. 登陆进去线上环境
2. 利用工具从中间抓包，拦截所要调试的代码请求，返回本地文件。

固然工具备不少种~这里用Fiddler做为例子~

具体实现

1. 找到要调试的线上代码所在文件

好比我要调试的是sureSign（） 方法，先在控制台上定位到该方法所在的文件

2. 找到该文件资源所对应的请求

依旧是在控制台查找

3. 在Fiddler里面拦截该请求，并替换返回本地文件

这样子就已经让本地的文件，替代了远程的文件~能够在本地利用远程的环境调节啦啦啦~~

可是若是文件在框架(如vue + webpack)的打包以后，和其余文件有着关联，若是替换一个不起做用，那咱们也能够整一个替换掉

先把index.html替换掉

再把js资源替换

这样子就行啦~

固然利用抓包还能够实现不少东西，这个也只是一个开发调试用的小技巧~