whistle手機調試工具使用簡單教程

npm全局安裝

npm install -g whistle

全局啓動

w2 start

啓動以後，輸入127.0.0.1:8899 就能夠訪問到whistle調試界面了：

 

 咱們主要經常使用幾個功能：

一、mock本地數據映射，即手機請求線上某個接口的時候作本地映射，直接請求本地json數據

二、查看console打印信息，對於windows系統的電腦來講仍是頗有用的，不然調試ios是個很大的麻煩

 

mock數據映射

點擊該調試界面的左邊第二個按鈕，rules，輸入想要攔截的接口 空格 本地mock數據文件路徑

eg: 

net.abc.com/getlist E:\project\mock-data\ios.json

若是想要註釋掉此行，前面加  「 # 」

若是想要調試某個頁面，在頁面後面加 weinre:// 任意名稱

若是要查看某個頁面的log，在頁面後面加 log:// 

這些均可以同時寫在一塊兒以下：

192.168.5.252:3001/aaa.html log:// weinre://aaa

 

手機代理設置

一、手機在連着和電腦同一個局域網下，手機進入wifi設置，設置代理爲手動，IP地址爲電腦IP地址，端口號爲whistle本地調試界面打開的端口號，這裏是8899

二、安裝證書，手機瀏覽器輸入rootca.pro （或者在調試界面點HTTPS，手機掃描便可跳轉） ,會跳轉到下載證書界面，點擊下載好以後安裝，安卓須要起個名字，ios須要在 設置——通用——關於本機——證書信任設置中開關置爲開。

注意：不少瀏覽器不支持下載此類文件，或者有些瀏覽器雖然能夠下載此類文件可是沒法安裝，由於不識別相應文件格式，可使用扣扣瀏覽器或者其餘支持的瀏覽器下載安裝便可。

小米手機獨特的解決方案，參考此文：https://blog.csdn.net/jinshitou2012/article/details/79044560

 

 

頁面調試

至此，手機點擊請求的頁面，whistle調試界面已經能夠看到請求了，右側點擊tools-log，能夠查看頁面console.log打印，若是想要調試html，點擊調試界面上面的weinre，找到剛剛rules配置的時候weinre後面名字點擊便可看到

 

 

點開調試界面以後還須要一步重要操做，targets下會顯示頁面調試地址，點擊地址，地址變爲綠色，就能夠到 【elements】中審查元素了。

其餘使用方法參考官方文檔：http://wproxy.org/whistle/

推薦好文：http://www.javashuo.com/article/p-nbgyrphp-cd.html