目录
whistle介绍
整体结构
能力
规则
6个使用场景示例
1.修改Host
2.代理
3.替换文件(线上报错时)
4.替换UA
5.远程调试
6.JS注入
互动
whistle介绍
整体结构
安装: npm install whistle -g
cli:whistle help
启动:whistle start
能力
√http代理/反向代理
√捕捉(请求头,返回头)/重放(历史记录管理能力)/组合请求(http/https/websocket/tcp)
√基于模式匹配:hosts/文件替换/请求返回调试
√移动端远程调试
资料推荐:http://wproxy.org/whistle/
规则
访问如 baidu.com 就会跳到www.qq.com
6个使用场景示例
1.修改Host
Rules:
www.dev.com http://127.0.0.1:3000
// 正则形式
/.*dev.com(.*)/ http://127.0.0.1:3000$1
2.代理
# // 正则形式 '# 注释'
# www.dev.com proxy://www.baidu.com
// 正向代理:透过代理服务器连的其他网站
// proxy://127.0.0.1:2333这是一个上网的代理,访问网络代理服务器;
// 所有访问www.dev.com的请求,
// 通过127.0.0.1:2333网址转发到www.dev.com上
www.dev.com proxy://127.0.0.1:2333
// # 反向代理 :透过代理服务器连的是本地的服务,或者是说指向内部的
www.dev.com/api http://127.0.0.1:3000
// 跨域转发代理
www.dev.com/api http://test.xxx.com
www.dev.com/api/order -> http://test.xxx.com/order
3.替换文件(线上报错时)
// 我希望访问require.js做个文件时,替换为本地文件
www.dev.com/require.js D:\dev\course-prepare\network\src\lib\add.js
Rules规则,上面的规则更重要
4.替换UA
很多网站通过不同的UA给用户返回内容
// baidu网址是https要安https证书
www.baidu.com ua://{i-ua}
// {i-ua}这个值在Value自己配
5.远程调试
1.点https,手机扫那个二维码,在手机上安装个根证书,不同手机安法不同
2.配置Rules
www.baidu.com weinre://BaiD
3.点Weinre,会出现刚刚设置的BaiD,点进去
4.手机设置代理,点击到whistle的代理电脑 的ipconfig 如192.168.3.66:8899
6.JS注入
# www.baidu.com jsAppend://https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.3.4/vconsole.min.js
sina.cn jsAppend://{vconsole.js}
// {vconsole.js} 在Value中配置
互动
思考:文本接口带来了哪些附加价值?