我相信移動端除錯是很多前端開發er的一個痛點。

某天測試小姐姐拿著自己的 iphone8s 過來找我，說頁面打不開。我想：這怎麼可能，我手機裡挺好的呀，Chrome除錯工具也沒報錯呀！就把她手機拿過來看了看，發現一進去還真就是一片空白。WTF！那問題就來了，開發環境下沒報錯，可真機又出現了意料之外的情況，而且沒法像 PC端那樣F12，怎麼定位問題並解決呢？

好了，先直接放上今天的主角——spy-debugger

關於spy-debugger

集成了weinre、node-mitmproxy、AnyProxy的一站式頁面除錯、抓包工具。遠端除錯任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybridApp等）。支援HTTP/HTTPS，無需USB連線裝置。

特性：

1、頁面除錯＋抓包

2、操作簡單，無需USB連線裝置

3、支援HTTPS。

4、spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。

5、自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。

6、可以配合其它代理工具一起使用(預設使用AnyProxy) (設定外部代理可以看下面自定義配置)

使用案例

頁面編輯模式

啟動命令：spy-debugger -w true

weiner頁面除錯介面

anyproxy抓包介面

安裝與上手

安裝：

Windows 下

npm install spy-debugger -g

Mac 下

sudo npm install spy-debugger -g

三分鐘上手：

第一步：手機和PC保持在同一網路下（比如同時連到一個Wi-Fi下）

第二步：命令列輸入spy-debugger，按命令列提示用瀏覽器開啟相應地址。

第三步：設定手機的HTTP代理，代理IP地址設定為PC的IP地址，埠為spy-debugger的啟動埠(預設埠：9888)。

Android設定代理步驟：設定 - WLAN - 長按選中網路 - 修改網路 - 高階 - 代理設定 - 手動iOS設定代理步驟：設定 - 無線區域網 - 選中網路 - HTTP代理手動

第四步：手機安裝證書。注：手機必須先設定完代理後再通過(非微信)手機瀏覽器訪問http://s.xxx(地址二維碼)安裝證書（手機首次除錯需要安裝證書，已安裝了證書的手機無需重複安裝)。iOS新安裝的證書需要手動開啟證書信任

第五步：用手機瀏覽器訪問你要除錯的頁面即可。

自定義選項

埠

(預設埠：9888)

spy-debugger -p 8888

設定外部代理（預設使用AnyProxy）

spy-debugger -e http://127.0.0.1:8888

spy-debugger內建AnyProxy提供抓包功能，但是也可通過設定外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。

設定頁面內容為可編輯模式

該功能使頁面內容修改更加直觀方便。 (預設： false)

spy-debugger -w true

內部實現原理：在需要除錯的頁面內注入程式碼：document.body.contentEditable=true。暫不支援使用了iscroll框架的頁面。

是否允許weinre監控iframe載入的頁面

(預設： false)

spy-debugger -i true

是否只攔截瀏覽器發起的https請求

(預設： true)

spy-debugger -b false

有些瀏覽器發出的connect請求沒有正確的攜帶userAgent，這個判斷有時候會出錯，如UC瀏覽器。這個時候需要設定為false。大多數情況建議啟用預設配置：true，由於目前大量App應用自身（非WebView）發出的請求會使用到SSL pinning技術，自定義的證書將不能通過app的證書校驗。

是否允許HTTP快取

(預設： false)

spy-debugger -c true

工具介紹到這了，相信你用了後會愛上它的。目前移動端除錯也還可以藉助其它方法，今天推薦的一個是我覺得功能比較全面的，工作中具體場景大家可以適當選擇。像騰訊的vConsole、上面提到的weinre，以及Charles、Fiddler都是不錯的輔助工具，我們作為開發人員一定要利用好這些工具幫助自己定位到問題從而找到解決方案，這才是最重要的。