1. 程式人生 > >一站式遠端頁面除錯工具spy-debugger

一站式遠端頁面除錯工具spy-debugger

安裝

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 10.3.1以上版本證書安裝問題
第五步:用手機瀏覽器訪問你要除錯的頁面即可。

自定義選項

(預設埠: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

更多

修復weinre在node.js V7版本會崩潰的bug

對weinre在頁面document ready事件前,無法列印console.log日誌進行了增強修復。

增強weinre列印未捕獲異常(Uncaught Exceptions)功能。

spy-debugger原理是集成了weinre,簡化了weinre需要給每個除錯的頁面新增js程式碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js程式碼。讓頁面除錯更加方便。