whistle是基於Node實現的跨平臺web除錯代理工具，可以作為普通的http代理或者用來抓包、修改、操作http、https、websocket、tunnel請求，如：修改hosts、請求方法、響應狀態碼、請求(響應)頭、請求(響應)內容等等，基本上可以操作web請求的方方面面，而且支援外掛擴充套件功能，本文主要講下如何用whistle除錯移動端頁面，安裝及使用whistle等其它內容請參見Github：github.com/avwo/whistl…。
移動端除錯遇到的問題
相較於PC側，在移動端除錯網頁，主要會遇到以下三個問題：
- 沒有Console，無法檢視頁面的js錯誤及通過
console.xxx輸出的除錯日誌 - 無法檢視、修改頁面的DOM結構及樣式
- 無法debug
一般情況下，移動端頁面在PC的Chrome瀏覽器上模擬器上進行除錯，但並非所有移動端頁面都可以在PC的模擬器上除錯，比如一些需要呼叫到APP的本地API的APP內嵌頁面，或者測試頁面相容性問題等，只有在真機上執行才能看到真實效果，這個時候可以利用whistle，通過簡單配置即可解決上述的前兩個問題(目前無法通過頁面js獲取頁面的除錯資訊，暫不支援debug功能，可以通過 console.log 來代替)：
利用whistle檢視頁面的js錯誤及通過 console.xxx 輸出的除錯日誌
whistle內部實現了類似瀏覽器的Console的遠端Log平臺，只需配置簡單的whistle規則即可自動捕獲頁面的錯誤及console輸出的資訊，以m.baidu.com/為例，由於 https://m.baidu.com/ 是用https訪問，先在whistle上開啟https攔截，才能對https請求進行抓包及修改，手機需要配置下whistle代理，一切準備就緒後，可以配置如下規則：
m.baidu.com log://
# 如果你想同時注入js指令碼，可以用下面一種方式
# 在mac或linux載入本地js檔案/User/xxx/test.js
# m.baidu.com log:///User/xxx/test.js
# 在windows上載入本地js檔案D:\xxx\test.js
# m.baidu.com log://D:\xxx\test.js
# 直接從whistle的Values配置的key-value裡面獲取指令碼
# m.baidu.com log://{test.js}
複製程式碼其中，whistle的Values參見：avwo.github.io/whistle/web…，匹配方式也不僅侷限於域名匹配，還包含路徑、正則、萬用字元、精確匹配等多種匹配模式，具體參見幫助文件。
我們用whistle的Values在log裡面注入一個段js，主要用來通過console.error, console.warn, console.log等輸出資料，並模擬一個異常丟擲：
m.baidu.com log://{test.js}
複製程式碼test.js:
console.error({ error: true });
console.warn({ error: true, warn: { test: true } });
console.log(123456);
// 模擬丟擲異常
console.notAFunction('test');
複製程式碼效果如下圖：
利用whistle檢視、修改頁面的DOM結構及其樣式
whistle整合了weinre的功能，同樣只需配置一條規則即可通過在pc上通過weinre修改網頁的DOM結構及其樣式：
m.baidu.com weinre://test
複製程式碼其中，weinre://test 中的 test 只是作為weinre的分類，防止一個weinre除錯頁面出現太多的連線，效果如下圖：
利用whistle注入vConsole
vConsole是微信團隊開發的輕量、可擴充、針對手機網頁的前端開發者除錯皮膚，主要原理是通過在頁面注入js實現模擬PC瀏覽器的Console功能，這邊利用whistle的js協議往指定網頁(m.baidu.com/)注入vConsole.js，配置whistle規則：
m.baidu.com js://{vConsole.js}
複製程式碼效果如下圖：
注意： vConsole和weinre不能同時使用
whistle還有很多應用場景，後續再逐步輸出給大家，瞭解更多內容請訪問whistle的Github：github.com/avwo/whistl…，有問題或建議歡迎大家提issue或PR。