轉載自 https://github.com/wuchangming/spy-debugger
關於spy-debugger
一站式頁面調試、抓包工具。遠程調試任何手機瀏覽器頁面,任何手機移動端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新安裝的證書需要手動打開證書信任
iOS10.3.1 新安裝的證書需要手動選擇信任證書。
解決方式:
設置->通用->關於本機->證書信任設置-> 找到node-mitmproxy CA(打開)
第五步:用手機瀏覽器訪問你要調試的頁面即可。
自定義選項
端口
(默認端口: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代碼。讓頁面調試更加方便。