[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