如何使用代理快速调试线上代码
站长
· 阅读数 2
场景
有时我们会遇到以下令人抓狂的场景：
- 微信体系下，实现 H5 跳转到小程序，但这个功能跟域名绑定，没法在本地调试，如果这个场景下出现 bug，只能本地修改完后同步上生产环境，然后再进行测试
- H5 页面，真机调试，想定位特定元素，就算开了 vConsole 也要找半天，而且非常不方便查看
- H5 生产环境，出现了一个莫名其妙的错误，想看看 log，但生产环境没有开 VConsole
以上场景，总结一句话就是生产环境或真机环境的调试不能跟本地开发环境的调试那样如丝般顺滑
工具介绍
上述这些令人抓狂的场景，其实都可以通过使用代理工具巧妙解决（准确来说应该是绕开了这些问题）
有很多代理工具，有兴趣的同学可以了解一下：
对了，如果有对“代理”是什么？有疑问的话，可以参考一下这篇文章：终于有人把正向代理和反向代理解释的明明白白了！
如何安装、使用whistle？
详情请参考官方文档：whistle-安装启动
将线上的文件替换成本地文件
“背景”中的第一个场景，有一个简单的解决思路：
- 使用生产环境的域名进行访问
- 将通过生产环境域名请求的 HTML、JS、CSS 文件，通过代理替换成本地开发环境的文件
如此一来，就可以实现模拟生产环境快速进行调试，再也不用本地改完后更新上生产环境看调试
经过上面的一番骚操作，就可以实现用线上域名，访问本地文件的效果
其原理，大概是这样的：
- 将线上的 html 替换成本地的 html 后，用线上域名访问时，因为有代理拦截，请求实际上并没有到线上服务器，而是在代理那，然后代理鸡贼地将请求换成本地的文件
- 同理，html 都已经是本地的文件了，这时，如果把 js 也换成本地，就可以实现目标想要达到的效果
往线上环境注入 JS 脚本
“场景”中的第二个场景，可以通过注入 JS 脚本的方式在使用生产环境域名访问的同时，开启 vConsole
安装 whistle.inspect 插件后（安装教程），直接在 whistle 的 Rules 添加如下规则就 ok：(ps：还可以将 vConsole 换成 eruda 或者 mdebug)
集成 weinre 远程调试
“场景”中的第三个场景，可以通过集成 weinre 实现远程调试
大概的情况就是真机上访问网页，在 pc 端页面可以查看对应的 Console、Elements、Network 等
做过微信小程序开发的同学应该知道，情况跟使用开发者工具的真机调试一样
当然，代理工具的妙用远不止上述内容，掌握基础原理后就可以举一反三，在需要的时候应该可以帮上一些小忙 o(￣▽￣)ｄ