携手创造，共同成长！这是我参加「日新计划 8 月更文挑战」的第14天，点击检查活动概况
场景
有时咱们会遇到以下令人抓狂的场景：
- 微信体系下，完成 H5 跳转到小程序，但这个功能跟域名绑定，没法在本地调试，如果这个场景下呈现 bug，只能本地修正完后同步上出产环境，然后再进行测试
- H5 页面，真机调试，想定位特定元素，就算开了 vConsole 也要找半响，并且十分不方便检查
- H5 出产环境，呈现了一个莫名其妙的错误，想看看 log，但出产环境没有开 VConsole
以上场景，总结一句话便是出产环境或真机环境的调试不能跟本地开发环境的调试那样如丝般顺滑
东西介绍
上述这些令人抓狂的场景，其实都能够经过运用署理东西巧妙处理（精确来说应该是绕开了这些问题）
有很多署理东西，有爱好的同学能够了解一下：
- Fiddler（window 下的老牌署理东西，收费，你懂的~）
- Charles（mac 下的老牌署理东西，收费，你懂的~）
- Whistle（跨渠道，今日推荐，免费开源）
对了，如果有对“署理”是什么？有疑问的话，能够参阅一下这篇文章：终于有人把正向署理和反向署理解说的明明白白了！
如何装置、运用whistle？
概况请参阅官方文档：whistle-装置发动
概要版介绍也能够参看这篇文章：一文搞定前端署理骚操作！再也不怕线上bug啦！
将线上的文件替换成本地文件
“背景”中的第一个场景，有一个简略的处理思路：
- 运用出产环境的域名进行拜访
- 将经过出产环境域名恳求的 HTML、JS、CSS 文件，经过署理替换成本地开发环境的文件
如此一来，就能够完成模仿出产环境快速进行调试，再也不用本地改完后更新上出产环境看调试
假设咱们现在是的前端开发，大周末的被网友“友谊”提（ju）示（bao）了一个线上 bug，为了不影响这个月的业绩考核，赶忙打开家里的游戏机，然后跟着接下来的过程操作：
- 拜访
https:///发现其 html 文件链接便是https:/// -
- 在 whistle 的 Rules 页面增加规矩，将线上的 html 替换成本地的 html（假设我本地出产环境的衔接是
http://127.0.0.1:8080/），规矩如下：https:/// http://127.0.0.1:8080/
- 继续检查
https:///上的内容，发现咱们核心要修正的正是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：仍是以为例 (￣▽￣)~*
# 移动端调试东西
whistle.inspect://vConsole
# 想用另外两个东西，能够随意挑一个
# whistle.inspect://eruda
# whistle.inspect://mdebug
集成 weinre 长途调试
“场景”中的第三个场景，能够经过集成 weinre 完成长途调试
大约的状况便是真机上拜访网页，在 pc 端页面能够检查对应的 Console、Elements、Network 等
做过微信小程序开发的同学应该知道，状况跟运用开发者东西的真机调试相同
具体流程能够检查一文搞定前端署理骚操作！再也不怕线上bug啦！ ——集成 weinre 长途调试
当然，署理东西的妙用远不止上述内容，把握根底原理后就能够触类旁通，在需求的时分应该能够帮上一些小忙 o(￣▽￣)ｄ
