景区网站建设案例,免费建站网站教程,搜索引擎优化技术都有哪些,免费的一级域名申请Whistle(基于 Node 实现的跨平台抓包调试工具)的使用
基于Node实现的跨平台抓包调试工具
可以劫持网络请求#xff0c;并进行请求和响应的修改#xff0c;来提高我们的开发调试效率
1.一键安装(装包/证书)
npm i -g whistle w2 start --init
证书的问题 安装…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;
}
/scriptwhistle实现数据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}
]
