Whistle(基于 Node 实现的跨平台抓包调试工具)的使用
Whistle(基于 Node 实现的跨平台抓包调试工具)的使用
基于Node实现的跨平台抓包调试工具
可以劫持网络请求，并进行请求和响应的修改，来提高我们的开发调试效率
1.一键安装(装包/证书)
npm i -g whistle && w2 start --init
证书的问题
-
安装证书。确保是绿色
-
重启wjistle , 敲 w2 restart
https://juejin.cn/post/6930414273327792135
2.浏览器打开
http://localhost:8899
3.安装浏览器拓展(需要科学上网)
Proxy SwitchyOmega
4.浏览器拓展-新建情景模式
填写代理服务器选择填写
HTTP localhost 8899
不代理的地址列表填写
<-loopback>
安装http-server
npm i -g http-server
解决图片跨域
1.新建规则:
(1)Rules中点击上边Create新建规则:www.runoob.com resCors://*
(2)新建规则:www.runoob.com resHeaders://{crosHeader}
Values中新建crosHeader 输入access-control-allow-origin: *
2.勾选
3.网络中停用缓存
忽略代理(过滤)www.baidu.com/s ignore://*
Whistle常见命令
w2 start
w2 stop
w2 restart
w2 add
正则匹配
匹配特定页面 /ke.qq.com/course/\d+/ localhost:8080
匹配所有请求 * localhost:8080
匹配关键词 /api/i test.api.com
路径匹配
匹配指定路径下的所有请求 ke.qq.com/cgi-bin www.test-dev.com
匹配http请求 http://www.test.com/api www.test-dev.com
精确匹配
只匹配单个路径，不包含子路径
**$**www.baidu.com localhost:8081/http
通配匹配
匹配开头 ^www.example.com/test/*** referer://http://www.test.com/$1
匹配开头和结尾 ^www.example.com/test/***test$
绑定转发
将域名转发到本地进行开发 ke.qq.com localhost:8080
在将后台请求分别转发到开发和测试环境 ke.qq.com/api test.ke.qq.com/apike.qq.com/api dev.ke.qq.com/api
修改请求
修改浏览器UA (场景：伪造设备) ke.qq.com ua://{wp_ua}
修改请求referer （场景：伪造来源） ke.qq.com referer://https://baidu.com/
修改请求头 ke.qq.com reqHeaders://{req-headers}
修改响应
修改响应头，加跨域内容 ke.qq.com resHeaders://{res-cors}
往html文档(之前)追加html标签(script,style or normal html tag) ke.qq.com htmlbody://{bodycss}
往js响应追加脚本，如果响应是html文档，则自动用<script></script>包装后插入 ke.qq.com js://{env.js}
往css响应追加样式，如果响应是html文档，则自动用<style></style>包装后插 ke.qq.com css://{css-test}
resReplace，替换响应的某些字符串 ke.qq.com resReplace://{res-replace}
使用线上域名代替本地开发
将 ke.qq.com/user/index 代理到本地 localhost进行开发
设置静态文件转发, ke.qq.com/user/index localhost:8080
发送获取用户信息请求
whistle向页面注入脚本
#注入本地环境变量
htmlPrepend://{env.script} ***.ke.qq.com
```env.script
<script>
if (typeof window !== 'undefined') {
window.ENV = 'test';
}
</script>
```
whistle实现数据mock功能
ke.qq.com/cig-proxy/user_list {userList}#list
[{name:213},{name:213}
]whistle实现数据mock功能
ke.qq.com/cig-proxy/user_list {userList}#list
[{name:213},{name:213}
]