對前端十分友好的抓包工具whistle入門使用

我爲何使用whistle

瀏覽器抓包工具,手機抓包工具，操做簡單，文檔全面

如何使用whistle

1.安裝

npm install whistle -g 

w2 -h // 查看幫助信息

複製代碼

2.啓動

w2 start -p 8899
複製代碼

3.啓動以後還須要爲瀏覽器配置代理以後才能抓包

推薦使用SwitchyOmega

4.配置完成以後打開localhost:8899查看抓包結果，websocket請求也能夠抓到

深刻使用

1.手機上如何抓包

手機和電腦鏈接同一個wifi，在手機的wifi上設置代理,如下圖爲例，主機名爲電腦的ip，端口號爲whistle的啓動端口8899

2.設置rules轉發請求

whistle能夠代替繁雜的webpack代理配置，輕鬆搞定proxy

好比下圖中的配置表明將cloud.xylink.com的請求和https://cdn.xylink.com/public/20190514/mms/的請求轉向本地的3002端口（這裏之因此是3002端口是由於我本地webpack啓動的項目是3002端口，這個根據本身啓動的項目所監聽的端口而定）

打開的頁面，注意個人url是真實的線上地址，而不是Localhost本地地址

whistle中查看請求的轉發狀況，能夠看到有些請求已經的確轉發到了本地3002端口

但是咱們也發現有些請求居然轉發失敗了

仔細查看，轉發失敗的請求都是本來請求的cdn上的資源，轉發到本地3002端口以後都失敗了，這下緣由就明白了，由於我本地修改了代碼，打包生成以後的hash值改變了，也就不存在desktop.b6b1a282.css這個文件了，所以請求轉發失敗了

綜上，使用whistle轉發請求來達到本地調試的情景，大多用在調試線上問題的場景，而在平常開發的時候因爲本地在靜態資源方面會遇到問題，除了webpack設置代理以外暫時沒有想到好的解決方案，若是你們有解決方案，歡迎提出

3.抓取https的請求

抓取https的請求須要安裝證書，官網有證書的安裝說明，很詳細，記得信任證書。另外，電腦上安裝了證書能夠抓取瀏覽器發出的https請求，可是要抓取手機的https請求，就須要再次在手機上安裝證書，不然也是抓取不到的

最後附上whistle官方文檔 whistle

歡迎star或指正問題,時間緣由，後續使用過程當中會再更新關於whistle一些問題。