whistle 前端工具之抓包利器

 

1、業務場景

 

前端本地開發的場景中，咱們須要頻繁的改動代碼，並須要實時看到效果，而且在一些開發場景中，咱們須要將特定的請求代理到特定的IP、本地文件等，因此使用fiddler或whistle等本地、真機抓包調試工具是很是必要的。

 

2、爲何使用whistle

 

在歷史的長河中，咱們是使用fiddler+willow再搭配小米wifi 進行本地和真機抓包調試的，無可厚非，fiddler的抓包和代理的功能十分強大，但在使用的過程當中，有個很蛋疼的缺點就是內存泄漏！！fiddler掛一成天，內存就被吃完了，而後電腦變得巨卡無比，即便加了個內存條也是治標不治本，這時候只能使用重啓fiddler大法來解決，可是，長期的折磨使我萌生了有沒有工具能夠替代fillder的想法。因而乎，我發現了whistle。試用了一段時間後，發現它能替代fiddler完成咱們平常的開發工做，而且在某些方面whistle作的更好，下面就分享一下whistle的使用實踐。

 

3、安裝啓動

 

1. 安裝

 

 npm install  -g  whistle   //也可使用tnpm
 
 w2 -h  //幫助信息

 

2. 啓動

 

w2 start -p 8899 //不設置端口默認使用8899

 

更多命令：安裝啓動
啓動完成後在chorme下打開 127.0.0.1:8899 能夠看到這麼一個頁面：

 

 

可是如今還沒法抓包，須要爲瀏覽器設置代理。

3. 爲瀏覽器配置代理

• whistle-for-chrome插件
• SwitchyOmega

以上2款chorme插件二選一，我使用的是SwitchyOmega , 將瀏覽器代理到8899端口
!

 

配置完成後再看whistle的控制檯，此時已經能抓到請求了：

 

 

4、基礎功能

咱們最常使用的就是NetWork 和 Rules 功能了, 其中NetWork是查看抓包，而Rules是設置代理，下面我以一個移動端活動爲例，介紹一下whistle的使用：

一、界面功能：

a.建立並啓用一個代理選項：

b. 啓用多個代理選項

更多界面功能詳見：界面列表

二、 匹配模式：

a. 基本匹配:

# 匹配域名www.qq.com下的全部請求
www.qq.com operatorURI

# 匹配域名www.qq.com下的全部http請求
http://www.qq.com operatorURI

# 匹配域名www.qq.com下的全部https請求
https://www.qq.com operatorURI

# 限定域名的端口號
www.qq.com:8888 operatorURI # 8888端口

#限定具體路徑
http://www.qq.com/xxx operatorURI

# 精確匹配 ， 以$符號開頭
$http://www.qq.com/xxx operatorURI
 

b. 正則匹配：

 /http:\/\/(.*)/  log://

c. 通配符匹配

# 通配符匹配，以 ^ 開頭(若是須要限制結束位置能夠用 $)，* 爲通配符

^www.example.com/test/***   operatorURI


# 通配域名匹配：
# 匹配二級域名以 .com 結尾的全部url，如: test.com, abc.com，但不包含 *.xxx.com
*.com   operatorURI
//*.com  operatorURI


# 通配路徑匹配：
# 對全部域名對應的路徑 protocol://a.b.c/xxx[/yyy]都生效
*/  operatorURI
*/xxx  operatorURI

更多匹配模式詳見：匹配模式

三、代理協議：

a. file：

http://www.qq.com/pgg_act/ D:\dev\

將此路徑的請求都代理到本地D:dev 目錄下。

b. HOST ：

10.241.11.111 www.qq.com

將www.qq.com的請求都代理到10.241.11.111 IP上，實如今本地環境發測試環境的請求，

c. 抓取 HTTPS ：

whistle支持抓取https 請求，具體配置方法參見：HTTPS攔截

d. 請求替換：

在php接口開發中，咱們須要將jsonp請求代理到本身的開發機，使用請求替換能夠達到目的（相似fillder的extention）：

http://www.qq.com http://www.baidu.com

以上幾個協議基本能瞞足平常的開發，固然這只是強大的whistle的冰山一角，更多代理功能參見：協議列表

5、進階

1. 真機調試：

搭配小米wifi ，配置代理後即可抓取真機的包，在右上角online 按鈕可查詢到對應的代理服務器和端口：

2. 使用 log 功能打印日誌：

在移動端真機調試中，咱們沒法像瀏覽器控制檯那樣，查看輸出的日誌和數據，以往的替代方案是在頁面上使用vconsole插件，而有了whistle後，咱們能夠這樣作：

/http://www.baidu.com/ log://

這時候不論是PC仍是真機，只要是訪問 http://www.baidu.com 匹配方式下的頁面，均可以在whistle的log選項下看到控制檯輸出的信息：

3. 使用 values + js 功能往頁面注入 vconsole.js ：

咱們在values功能欄下新建一個vConsole.js , 並把vconsole的源碼放進去，並初始化一個vconsole對象,此時在rules 下配置：

http://www.baidu.com js://{vConsole.js}

此時，咱們刷新頁面能夠看到：

4. 使用whistle內置的Weinre調試移動端頁面：

weinre相信你們都很熟悉，而whistle內置了weinre，使用方法以下：
在rules配置：

http://www.qq.com weinre://test.js

這時候，就能在http://127.0.0.1:8899/weinre/client/#test 看到調試界面了：

 

ps: 這東西不是很好用~

5. 一個小技巧：

因爲whistle是web的控制檯，這時候咱們在chorme 下面將 127.0.0.1：8899 添加到桌面。就能像軟件一下使用這個控制檯拉~

6、不止於此

whistle還有許多實用的功能，盜個官網的圖：

 

其中，重點介紹介紹一下：

• mock數據： 利用whistle mock數據
• 自定義插件 ： 插件開發

7、使用體會

whistle 基於Node實現的跨平臺（包括不限於:windows、mac）web調試代理工具，相較於fiddler ， 從使用體驗來講，前者對於前端開發者更友好，但畢竟是web端的操做頁面，較fiddler來講沒有那麼穩定。但whistle的安裝簡便，配置簡單，比起fiddler那繁瑣的配置過程真的是完爆。從功能上說，fiddler有的whistle都支持，而且對於真機調試更爲方便，待挖掘的功能也更多。
附上github地址：https://github.com/avwo/whistle

8、參考文章：

官方文檔：http://avwo.github.io/whistle/

文章出處：http://www.javashuo.com/article/p-zxhxilcg-cb.html