携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
场景
有时我们会遇到以下令人抓狂的场景：
- 微信体系下，实现 H5 跳转到小程序，但这个功能跟域名绑定，没法在本地调试，如果这个场景下出现 bug，只能本地修改完后同步上生产环境，然后再进行测试
- H5 页面，真机调试，想定位特定元素，就算开了 vConsole 也要找半天，而且非常不方便查看
- H5 生产环境，出现了一个莫名其妙的错误，想看看 log，但生产环境没有开 VConsole
以上场景，总结一句话就是生产环境或真机环境的调试不能跟本地开发环境的调试那样如丝般顺滑
工具介绍
上述这些令人抓狂的场景，其实都可以通过使用代理工具巧妙解决（准确来说应该是绕开了这些问题）
有很多代理工具，有兴趣的同学可以了解一下：
对了，如果有对“代理”是什么？有疑问的话，可以参考一下这篇文章：终于有人把正向代理和反向代理解释的明明白白了！
如何安装、使用whistle？
详情请参考官方文档：whistle-安装启动
概要版介绍也可以参看这篇文章：一文搞定前端代理骚操作！再也不怕线上bug啦！
将线上的文件替换成本地文件
“背景”中的第一个场景，有一个简单的解决思路：
- 使用生产环境的域名进行访问
- 将通过生产环境域名请求的 HTML、JS、CSS 文件，通过代理替换成本地开发环境的文件
如此一来，就可以实现模拟生产环境快速进行调试，再也不用本地改完后更新上生产环境看调试
假设我们现在是掘金的前端开发，大周末的被网友“友情”提（ju）示（bao）了一个线上 bug，为了不影响这个月的业绩考核，赶紧打开家里的游戏机，然后跟着接下来的步骤操作：
- 访问
https://juejin.cn/发现其 html 文件链接就是https://juejin.cn/ - 在 whistle 的 Rules 页面添加规则，将线上的 html 替换成本地的 html（假设我本地生产环境的连接是
http://127.0.0.1:8080/），规则如下：https://juejin.cn/ http://127.0.0.1:8080/
- 继续查看
https://juejin.cn/上的内容，发现我们核心要修改的正是acrawler.js文件- 文件链接是
https://lf3-cdn-tos.bytescm.com/obj/rc-web-sdk/acrawler.js
- 在 whistle 的 Rules 页面添加规则，将线上的 js 替换成本地的 js（假设我本地生产环境的连接是
http://127.0.0.1:8080/acrawler.js），规则如下：https://lf3-cdn-tos.bytescm.com/obj/rc-web-sdk/acrawler.js http://127.0.0.1:8080/acrawler.js
经过上面的一番骚操作，就可以实现用线上域名，访问本地文件的效果
其原理，大概是这样的：
- 将线上的 html 替换成本地的 html 后，用线上域名访问时，因为有代理拦截，请求实际上并没有到线上服务器，而是在代理那，然后代理鸡贼地将请求换成本地的文件
- 同理，html 都已经是本地的文件了，这时，如果把 js 也换成本地，就可以实现目标想要达到的效果
往线上环境注入 JS 脚本
“场景”中的第二个场景，可以通过注入 JS 脚本的方式在使用生产环境域名访问的同时，开启 vConsole
安装 whistle.inspect 插件后（安装教程），直接在 whistle 的 Rules 添加如下规则就 ok：(ps：还可以将 vConsole 换成 eruda 或者 mdebug)
PS：还是以掘金为例 (￣▽￣)~*
# 移动端调试工具
juejin.cn whistle.inspect://vConsole
# 想用另外两个工具，可以随便挑一个
# juejin.cn whistle.inspect://eruda
# juejin.cn whistle.inspect://mdebug
集成 weinre 远程调试
“场景”中的第三个场景，可以通过集成 weinre 实现远程调试
大概的情况就是真机上访问网页，在 pc 端页面可以查看对应的 Console、Elements、Network 等
做过微信小程序开发的同学应该知道，情况跟使用开发者工具的真机调试一样
具体流程可以查看一文搞定前端代理骚操作！再也不怕线上bug啦！ ——集成 weinre 远程调试
当然，代理工具的妙用远不止上述内容，掌握基础原理后就可以举一反三，在需要的时候应该可以帮上一些小忙 o(￣▽￣)ｄ
