一、什么是whistle
- whistle是基于Node实现的跨平台web调试代理工具，
- 主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用
- whistle用的是类似配置系统
hosts的方式，一切操作都可以通过配置实现 - 可以通过
Node模块扩展功能
二、whistle在开发中常用的场景
- 绑定host
- mock数据，替换请求
- 代理线上\预发资源，调试解决问题
- 解决跨域
- 移动端调试
等...
三、whistle的安装及使用
- 安装node (
v0.10.0以上版本 )
-
安装whistle
npm install -g whistle //mac sudo npm install -g whistle`
-
启动whistle
w2 start启动后会展示访问的url列表，如下图所示
启动完成后在chorme按照提示访问对应的地址，如果浏览器可以打开如下页面即启动成功。
-
配置代理
分为全局代理、浏览器代理和移动端代理。日常工作常用的是chrome浏览器代理以及 移动端代理。浏览器代理：
安装 SwitchyOmega，然后按如下步骤配置：
配置后可以通过插件开启\关闭代理
移动端代理：
注意：手机要和当前电脑为同一局域网(wifi)内。以(警告)IOS为例（安卓同理）
-
安装证书
如果不安装根证书的话，不能抓HTTPS的包，访问浏览器会出现如下提示mac电脑安装证书：
*
* -
手机安装证书：
可以在浏览器中地址栏输入rootca.pro，按提示安装证书
或者通过whistle控制台的二维码扫码安装
ios 10.3 之后需要手动信任自定义根证书，设置路径：设置 > 通用 >证书信任设置
四、页面简介
五、基本用法
-
绑定host
whistle不仅支持传统的Host配置，还支持子路径和端口的Host转发配置，我们可以将我们的环境放在不同的规则中，随时切换，而且无缓存，切换时候生效更快 -
mock数据
a) 可以复制后端接口返回的数据，在whistle中保存
(警告)
注意:value中可以直接设置名称后缀为.json，设置后该value值会转为json格式
b) 通过配置规则resBody指定内容替换响应内容，在请求指定接口时，代理到本地mock的数据当访问到beta-color.jd.id/jdid_pc_website/signIn_banner/1.0接口时，返回的值即为whistle中设置的signIn的值，我们可以随意修改返回值的状态码、字段等，以满足开发需求
beta-color.jd.id/jdid_pc_website/signIn_banner/1.0 resBody://{signIn}
-
代理线上\预发资源，调试解决问题
可以把线上访问的资源代理到本地资源，快速验证，无须部署代码验证36.110.180.148 i.3.cn 111.13.29.170 m.jd.id i.3.cn/m/v2/index/3.4.47/js/index.js file:///Users/wanghanying1/Desktop/首页相关项目/eptid-m-index/dist/3.4.47/js/index.js resCors://* i.3.cn/m/v2/index/3.4.47/js/chunk-vendors.js file:///Users/wanghanying1/Desktop/首页相关项目/eptid-m-index/dist/3.4.47/js/chunk-vendors.js resCors://* i.3.cn/m/v2/index/3.4.47/css/index.css file:///Users/wanghanying1/Desktop/首页相关项目/eptid-m-index/dist/3.4.47/css/index.css resCors://*
-
解决跨域问题
配置接口相应头的access-control-allow-origin: *
// value 中增加 resCors.json,内容如下： origin: * // rules 中配置修改响应的cors m.jd.com/ resCors://{resCors.json} -
修改cookie
利用reqCookies 和 resCookies。修改请求头的 Cookie 和 修改响应头的 Set-Cookie
//value中新增cookie设置的.json文件，内容如下： test:123 // 修改请求头的 `Cookie` m.jd.id reqCookies://{reqcookies.json} // 修改响应头的 `Set-Cookie` m.jd.id resCookies://{resCookies.json}`
-
移动端调试
相比于在
PC端，在移动端调试网页，主要会遇到以下两个问题：- 没有
Console，无法查看页面的js错误及通过console.xxx输出的调试日志 - 无法查看、修改页面的
DOM结构及样式
移动端页面，虽然可以在
Chrome的模拟器中进行调试，旦有些问题无法在pc端很好的复现。APP中内嵌页，在不同的机器中会遇到兼容性问题，需要在真机中才能看到效果或者复现问题，这个时候就需要whistle来帮助调试移动端捕获页面错误和 log
m.jd.id log://在
Network—>Tools下面就可以看到报错等日志了- 查看移动端页面的 DOM 样式
// test印尼 用来作为标示区别不同的页面 https://m.jd.id/ weinre://test印尼 https://m.jd.com/ weinre://test主站` - 没有
-
注入vconsole
npm i -g whistle.inspect安装成功后，可以在
Plugins页面中看到安装的插件：移动端页面会出现浮动按钮，点击即可查看页面错误和log；
Tips： 了解更多可查阅whistle官网 http://wproxy.org/whistle/webui/values.html
