一、什么是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
网友评论