使用线上域名访问本地代码调试——whistle代理

本次场景

• h5开发时候，一些场景是依赖线上合法域名的，比如“h5跳小程序”，“授权（有别的更好解决方案）”。还有一些奇奇怪怪情况把，一下子想不起来。
• 所以利用whiistle，把本该请求线上的html、js文件替换成我们本地的html、js文件，达到一种调试的效果

如何使用whistle？

安装启动
详情请参考官方文档：whistle-安装启动

概要版介绍也可以参看这篇文章：一文搞定前端代理骚操作！再也不怕线上bug啦！

简要概括下流程:

1. 安装启动whistle
2. 安装证书
3. 浏览器/手机开启代理
4. whistle配置规则
5. 启动whitle

实战示例

第一二步就不讲， 看上面文章把，基本的认识还是要有的。

三 微信浏览器开启代理

讲下微信浏览器的，手机/谷歌文章都有介绍
这里的地址whistle的地址，因为是通过whistle做的代理，肯定得指向它

四 配置规则

替换html:
先正常访问线上，看看html文件请求地址（例如我的：https://cc.com/uo-works/）
再访问下本地，看看html文件请求地址（例如我的：http://10.18.3.18:8080/uo-works/）
然后whistle改成:

替换js
访问线上就不管用了，因为js文件有hash值，还有公共文件js、业务js【webpack配置不同】。而本地访问会简化成引入一个js。

这时候要用本地址访问网页，看看本地运行的时候是怎么访问js的，是这样：http://10.18.3.18:8080/uo-works

那么就配置：
至于为什么有个4.js，可能mac没有这个问题，我这边情况是头文件还引入了一个js文件，访问本地发现它是这样引入的：http://10.18.3.18:8080/4.js 所以我把这个规则也加上，不然会404，阻塞js。

五 启动

最终