当一个项目的代码分支越开越多，同步遗留bug修订的时候就愈加痛苦。而大公司的bug流程又相对严格，需要到bug系统中进行重复的操作，能受得了这气？！
好在同事分享了个之前一个大佬制作的，基于 Whistle 的脚本。可以实现一键assign、resolve、check、cbd那些可恶的bug。
什么是 Whistle ？
Whistle是基于Node实现的跨平台web调试代理工具，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。
他的主要用途如下：
-
抓包、mock、修改返回数据、修改响应头字段、延迟模拟弱网等
-
代理转发 - 需要配置代理转发规则
- 把某环境仅前端资源的请求代理转发到本地
- 把某个接口地址的请求代理转发到指定的后端环境地址
-
脚本注入
- 可通过拦截某页面请求，注入写好的脚本工具代码，来完成一些提效的自动化工作
1. 安装 Whistle
先确保你的node版本较新，这边我采用的是v18.17.0
在cmd中输入npm install -g whistle即可安装 Whistle ，npm默认镜像是在国外，有时候安装速度很慢或者出现安装不了的情况，如果无法安装或者安装很慢，可以使用taobao的镜像安装：
npm install whistle -g --registry=https://registry.npmmirror.com
2. 如何开启 Whistle
安装完成后可以通过w2 -h来验证是否安装成功。
可以通过执行w2 start或者w2 stop来开启或关闭服务。
我们根据提示前往 localhost:8899 就可以进行配置了。
3. 配置 Whistle
在 Rules-Default 处配置执行脚本的页面。
在 Values 中编写执行的脚本。因为RJ的bug管理系统有引用jQury，因此可以直接使用。
可以看到，脚本执行了一些 点击、填写 的操作，来模拟用户填写bug信息。
4. 使用 一键resolve工具
我们需要通过代理 localhost:8899 来执行该脚本。
我这边是使用了 Proxy SwitchyOmega 拓展程序来进行代理的。
开启代理后，进入RJ的bug管理系统就可以看到脚本的代码了。
但是！也太麻烦了吧~
你想要执行该脚本，还要开启 Whistle ，还需要代理，这这这不麻烦嘛？
有没有一种方法，我装完后，一进页面就可以直接使用？
大学时期的救星-油猴
想必每个大学牲都多多少少接触过油猴吧？学校里的线上选修课，还有课程的答题考试等等，都得依赖他来保我小命————油猴~
话不多说，撸起袖子开始移植
我们先安装好油猴脚本，然后添加新的脚本。
我只想在指定的页面才出现这些脚本按钮，那该咋办嘞？
首先，先观察bug系统所处的页面
我们先来观察，填写bug系统时所处的页面。
我们可以看到，bug信息是在iframe里面的，而src就是他的url链接，固定都是以
/bug_switch/bug/bug_info?bugId=xxxxxxx
开头，所以我们就在 @match 里加上这个url。
然后把那位已经跑路的大佬同事的代码拷进来。
这时候突然发现，为啥所有的 $ 都标黄了？还提示eslint: no-undef -'$' is not defined.
这是因为油猴脚本会跟网页的window共享一个window。网页中已经存在jQuery了，可能导致了冲突。我们只需要添加这一行就可以解决：/* globals jQuery, $, waitForKeyElements */。
然后我们在简单的优化下代码，就先把resolve的信息全局声明，方便修改吧~ 这样就不需要修改的时候再去一行一行地找代码了。填写完成后再来个提示~
现在我们直接看看bug系统，再点击一键resolve，成功!bug信息都帮我们自动填写好啦！
现在再推进bug系统里的bug状态就是飞速般嗖嗖滴~
