工具链和其他-超级好用的web调试工具whistle

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中配置