[TOC]
# whistle
[whistle](https://github.com/avwo/whistle)(读音 [ˈwɪsəl],拼音 [wēisǒu])基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的[Fiddler](http://www.telerik.com/fiddler/),主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用,不同于Fiddler通过断点修改请求响应的方式,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种[匹配方式](https://www.bookstack.cn/read/whistle/pattern.md),且可以通过Node模块[扩展功能](https://www.bookstack.cn/read/whistle/plugins.md):
[关于whistle](https://wproxy.org/whistle/)
## 安装启动
安装启动whistle,需要以下四个步骤: 安装whistle、启动whistle、配置代理。
2. 安装 whistle:
~~~javascript
$ npm install whistle -g --registry=https://registry.npm.taobao.org
~~~
3. 启动whistle
`w2 start` whistle默认端口为`8899`;
```
w2 start -p 8888 # 制定端口号启动
w2 restart #重启
w2 stop #关闭
w2 help # 查看帮助
```
配置:浏览器打开`http://127.0.0.1:8899`
# 抓包 https
开启拦截 HTTPS——勾选 Capture HTTPS CONNECTS 便可【表示对全部的请求都会开启 https 拦截的功能】
## pc端
windows下,配置页面中直接点击 [Download RootCA](http://127.0.0.1:8899/cgi-bin/rootca "http://rootca.pro/") 进行下载,下载证书后,双击证书,根据指引安装证书【证书需要存储到`受信任的根证书颁发机构`下】
mac 下,下载安装证书后,应该会自动打开证书设置应用
## 移动端
手机端 —— 手机扫二维码【或者手机浏览者直接访问 http://http://172.19.1.54:8899/cgi-bin/rootca】,下载安装证书,ios手机和部分安卓机需要手动信任自定义根证书;
# 配置代理
whistle 需要手动配置**浏览器代理**或者**系统代理**(代理的 ip 为 whistle 所在机器的ip,如果是本机就填`127.0.0.1`;端口号为启动时设置的端口号,默认为`8899`):
1. 配置浏览器代理(推荐使用):
1) 安装chrome代理插件:[Proxy SwitchyOmega](https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?hl=zh-CN) 或者 whistle-for-chrome
2) 安装firefox代理插件: Proxy Selector
2. 配置系统代理:
1) [Windows](http://jingyan.baidu.com/article/0aa22375866c8988cc0d648c.html)
2) [Mac](http://jingyan.baidu.com/article/a378c960849144b3282830dc.html)
3. 手机代理
1) 连 wifi,修改网络
2) http 代理,选择手动,服务器填写电脑本机 IP(ipconfig,ifconfig),端口填写`8899`
3) 在 whistle 交互界面点击 https下载证书`http://127.0.0.1:8899/#network`,手机扫码下载,按提示安装证书(或者通过`whistle`控制台的二维码扫码安装,iOS安装根证书需要到连接远程服务器进行验证,需要暂时把**Https拦截功能关掉**)
4) iOS 10.3 之后需要手动**信任自定义根证书**,设置路径: `Settings > General > About > Certificate Trust Testings`
5) 在手机端操作应用发出请求,在 PC 端 whistle 界面就可以看到捕获的请求
> [Https 代理](http://wproxy.org/whistle/webui/https.html)
## 测试一下
Rules 一栏中设置规则:
```
https://m.baidu.com https://wq.jd.com/
```
`w2 restart` 之后,测试一下。
> [whistle——抓包https请求的解决办法](https://www.cnblogs.com/fafa-coding/p/10832212.html)
# 文档
[whistle - Node实现的跨平台web调试代理工具 v2.4](https://www.bookstack.cn/read/whistle/README.md)
- 前言
- 中文字体
- 移动Web适配方案
- !移动Web基础!
- 详解适配相关概念
- 移动开发之设计稿
- 移动适配方案(一)
- 移动适配方案(二)
- vw+rem 实现移动端布局
- 移动端适配之雪碧图(sprite)背景图片定位
- 适配 iPhoneX
- 前端开发实战
- 打造自己的前端开发流程(Gulp)
- flexible.js案例讲解
- viewport 与 flexible.js解读
- 图片与字体
- 踩过的坑
- 浏览器默认样式
- 300ms点击延迟和点击穿透
- ios css
- CSS 常见问题
- Ionic v1混合开发
- Native App、Web App 、Hybrid App?
- ionic项目结构
- 混淆加密
- 解决问题
- cordova
- 环境配置
- 打包发布
- 问题
- 移动前端开发优化
- Web开发之抓包
- ===web移动开发资源===
- H5组件框架
- 调试集合
- 简单h5调试
- whistle
- devtools-pro