关于 Whitsle 的博客已有不少，本文想分享一点前端调试常用的功能与注意点
同时介绍下自己的 whistle.savefor-mock 懒人 mock 数据插件
准备
为什么是 Whistle
- 免费、安装方便（
npm i whistle -g） - 代码式的配置
Values工作区，直接在 Whistle 上编写 mock 数据，无需浏览器与 IDE 来回切换- 集成 log、weirne 等利于移动端调试的功能
- ...
准备流程
mac 的代理在教程中是直接配置了网络偏好设置，但实践发现会导致 Apple 服务相关网络的异常，如 App Store 加载不出（白屏），备忘录同步失败等
因此更推荐使用 Google 插件（如 Proxy SwitchyOmega）来配置浏览器的代理，也更方便切换
常用功能安利
移动端代理
真机调试 h5 页面时，以往会在客户端中造 http://PC_IP:port/path 来访问 PC 本地前端的服务
但倘若同时有多个页面 url，当电脑的 IP 地址变更时，客户端中的各个页面入口 url 都需修改
不如将手机 wifi 代理到 PC，然后客户端访问的 url 直接使用测试环境域名，再由 Whitsle 转发到本地前端服务
如此在 IP 变更时只需修改手机 Wifi 的代理地址即可，同时还能在 Whistle 中通过注释转发规则来方便地切换 local / 测试环境
移动端调试
- 查看、修改 DOM 结构
- 注入 vConsole
- 注意 weinre 和 vConsole 无法一起使用，会导致卡顿且 weinre 查看 DOM 节点不对劲
mock 数据
在后台接口未达到联调状态时，我们通常会在代码中写入 mock 数据，但这样对代码有侵入性，在提交公共仓库前还需对 mock 数据进行过滤，并且后续数据也不便保存，因此推荐统一使用代理工具进行 mock 数据
对业务需求中的 mock 数据，建立一个专用文件夹进行管理；对于常需要 mock 的接口，则在 Whistle 的 Values 工作区进行管理
更强大的是，Whistle 还能通过 script 脚本动态控制 mock 数据输出：whistle.vase
比如对前端常见的分页请求的接口，便可以根据 page 等参数来自动控制返回的数据内容
方便的配置参数
Whistle 提供了许多配置参数，在自测阶段非常实用：
resDelay、reqSpeed：等用于模拟接口请求缓慢时，前端的表现情况statusCode：模拟接口 404 等异常状态码的响应情形jsAppend：向页面注入 js 脚本，对项目代码无入侵性地注入 vConsole 等调试工具脚本，同时还有htmlAppend、cssAppendreqCors：用于解决代理调试时，可能因域名修改导致的跨域问题- ...
Node 端抓包
代理工具配置 PC 代理后，默认是抓不到 node 服务发出的请求（大部分时候是不需要的），需额外配置 node 端让其走代理服务
express
直接在 npm script 启动命令注入配置：
export http_proxy=http://127.0.0.1:8899 node app.js
egg
在 config.local 中配置 httpclient（调试辅助）：
config.httpclient = {
request: {
enableProxy: true,
rejectUnauthorized: false,
proxy: http://127.0.0.1:8899,
},
};
request 等第三方模块
在其文档中找到对应代理配置项（proxy / agent / ..）设定即可
注意点
回环地址无法受理
通过 localhost 访问本地前端页面时，会发现 Whistle 完全抓不到包
这是因为回环地址发出的网络请求并不会到达真实的网络适配器，故一般抓包工具默认都无法（了解到 Wireshark 经过特殊配置后可以做到）
区分 url 替换与 host 配置
关于两者的区别参见 Whistle 作者的文章：whistle 中配 host 和 URL 替换的区别
这个问题的常见场景是微信 H5 的本地代理调试，规定可获得用户授权信息的页面 url，必须在微信公众平台配置的网页授权域名列表中
这就导致，用微信开发者工具调试时，若使用 URL 替换的方式（访问合法域名的 url，而后通过配置代理转发到本地服务），会得到“redirect_uri 参数错误”的提示
因此需要用 host 配置的方式进行代理
插件分享
whistle.savefor-mock 用于更方便地建立 mock 数据
代理原步骤
（在 Network 列表中找到对应 API 后）
- 右键保存 res body，重命名后点击下载
- 在下载目录找到后，剪切到统一存放 mock 数据的文件夹
- 复制 API url，粘贴到 Rules 中，加上 mock 文件路径，编写转发规则
- 用编辑器打开 mock 文件，进行改写
使用插件后
- 复制 API url，粘贴到 Rules 中，加上配置 savefor-mock://文件名
- 刷新页面，文件自动打开以供改写数据
- 回到 Whistle 粘贴新规则，done
