利用whistle調試移動端頁面

whistle是基於Node實現的跨平臺web調試代理工具，能夠做爲普通的http代理或者用來抓包、修改、操做http、https、websocket、tunnel請求，如：修改hosts、請求方法、響應狀態碼、請求(響應)頭、請求(響應)內容等等，基本上能夠操做web請求的方方面面，並且支持插件擴展功能，本文主要講下如何用whistle調試移動端頁面，安裝及使用whistle等其它內容請參見Github：github.com/avwo/whistl…。

移動端調試遇到的問題

相較於PC側，在移動端調試網頁，主要會遇到如下三個問題：

1. 沒有Console，沒法查看頁面的js錯誤及經過 console.xxx 輸出的調試日誌
2. 沒法查看、修改頁面的DOM結構及樣式
3. 沒法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。