预发布环境中本地前端文件的调试方法

安宇雨 - 随手采集
2019-09-26 17:12:36
随手采集
0000-未整理-等待研究

一般在开发环境中对项目进行功能测试后，公司要求必须在预发布环境上连接真实的线上环境的数据，进行回归测试。对于前端开发人员来说，也可能在预发布环境测试中遇到本地未曾遇到的问题。这时前端人员必须具备在预发布环境中，快速定位问题的能力。而预发布环境中压缩的文件无疑造成了极大的困难，必须将资源文件对应到本地未压缩的原始文件进行调试和问题排查。

一、PC端的预发布环境调试方法

有赞的预发布环境中全站的js和css静态资源都和正式环境一样，是部署在CDN上打包并压缩后的。而连接预发布环境调试时，修改任何文件需要重新将其上传到CDN来查看效果。为了减少这一步骤，我们在项目中设置了一个开关，选择是使用CDN上的资源文件，或者本地HOST域名下的文件。通过在预发机器上开启这一开关，就可以方便的加载到本地的资源文件。

上述方法因为需要修改开关文件，调试完还需要将文件复原，存在一定不便。除了这一方法以外，我们自己写了个Chrome插件，在请求资源时，将CDN上的资源通过规则映射到本地。

二、移动端的预发布环境调试方法

在PC端我们可以使用Chrome插件来进行预发调试，但在移动端这种方式是不可行的。我们借助Charles来进行预发布环境调试。Charles是一款可以进行HTTP和SOCKS5代理的工具软件，在本地默认开放8888端口。我们可以用手机连接Charles进行代理调试。

设置手机WIFI代理，将IP指向电脑的IP，端口为Charles开放的8888端口，手机所有的HTTP流量通过Charles代理。请求会被转移到本地，我们可以任意地去替换请求中的本地资源文件，调试页面更方便。

配置好后，测试机发起的请求和得到的响应都是经过Charles来转发的。同时按照本文第一步操作，可以加载到本地的静态资源，开发时实时在测试机上查看修改效果。

让 Charles 支持HTTPS

通过测试机访问HTTPS网站时需要开启 Charles 的 SSL 代理功能，只有安装Clarles的根证书，我们才能解密通讯内容，在Charles中看到正确解析的HTTPS内容。

手机访问 charlesprxy.com/getssl下载安装Charles代理的根证书，并将其添加到系统根证书中。为需要监听的域名配置SSL代理后，Charles会基于它自己的根证书来签发SSL证书。

其原理是将Charles作为代理服务器，client端的请求会到Charles上来。Charles将client的请求重新发送到server，这样可以获得server的证书，和server建立连接，解密通讯内容。而Charles会使用根证书（Charles Proxy Custom Root Certificate）重新签署证书，加密HTTPS流量。client收到的证书就是由Charles签署的，只要Charles根证书在client的信任名单内，client就不会报证书错误。

让本地开发时显示受信任的HTTPS网页

在本地开发时，需要配置有效的网站证书，才能在浏览器中看到网站被标示为受信任的内容，出现小绿锁的安全标志，表示已通过值得信赖的第三方验证。在开发环境中不需要花钱由CA认证机构签发证书，为了获得受到客户端信任的Root级机构所签发的证书，我们通过模拟RootCA并导入到系统根证书，来自签SSL证书。这样我们的浏览器就不会老提示当前页面不受信任。

这样在预发布环境中，就可以无误地加载本地资源，移动端也能在Charles的SSL代理服务下，让前端人员方便地查看本地文件，去调试文件和解决问题了。

欢迎关注我们的公众号