本文主要介紹了spy-debugger的使用方式球拦,有同事使用的mobile-debugger也很好用。
頁面調(diào)試+抓包。調(diào)試生產(chǎn)HTTPS頁面坎炼。
特性
1愧膀、頁面調(diào)試+抓包
2、操作簡單
3谣光、支持HTTPS檩淋。
4、spy-debugger內(nèi)部集成了weinre萄金、node-mitmproxy狼钮、AnyProxy。
5捡絮、自動忽略原生App發(fā)起的https請求熬芜,只攔截webview發(fā)起的https請求。對使用了SSL pinning技術(shù)的原生App不造成任何影響福稳。
6涎拉、可以配合其它代理工具一起使用(默認(rèn)使用AnyProxy) (設(shè)置外部代理)
安裝
Windows 下
npm install spy-debugger -g
Mac 下
sudo npm install spy-debugger -g
三分鐘上手
第一步:手機(jī)和PC保持在同一網(wǎng)絡(luò)下(比如同時連到一個Wi-Fi下)
第二步:命令行輸入spy-debugger,按命令行提示用瀏覽器打開相應(yīng)地址的圆。
第三步:設(shè)置手機(jī)的HTTP代理鼓拧,代理IP地址設(shè)置為PC的IP地址,端口為spy-debugger的啟動端口(默認(rèn)端口:9888)越妈。
第四步:安裝證書季俩。注:手機(jī)必須先設(shè)置完代理后再通過(非微信)手機(jī)瀏覽器訪問http://spydebugger.com/cert安裝證書(手機(jī)首次調(diào)試需要安裝證書,已安裝了證書的手機(jī)無需重復(fù)安裝)梅掠。
第五步:用手機(jī)瀏覽器訪問你要調(diào)試的頁面即可酌住。
//PC頁面上可以點擊左側(cè)按鈕調(diào)試頁面UI和查看接口請求情況
自定義選項
端口
(默認(rèn)端口:9888)
spy-debugger -p 8888
設(shè)置外部代理(默認(rèn)使用AnyProxy)
spy-debugger -e http://127.0.0.1:8888
spy-debugger內(nèi)置AnyProxy提供抓包功能,但是也可通過設(shè)置外部代理和其它抓包代理工具一起使用阎抒,如:Charles酪我、Fiddler。
是否讓weinre監(jiān)控iframe加載的頁面
(默認(rèn): false)
spy-debugger -i true
是否只攔截瀏覽器發(fā)起的https請求
(默認(rèn): true)
spy-debugger -b false
有些瀏覽器發(fā)出的connect請求沒有正確的攜帶userAgent且叁,這個判斷有時候會出錯都哭,如UC瀏覽器。這個時候需要設(shè)置為false逞带。大多數(shù)情況建議啟用默認(rèn)配置:true欺矫,由于目前大量App應(yīng)用自身(非WebView)發(fā)出的請求會使用到SSL pinning技術(shù),自定義的證書將不能通過app的證書校驗展氓。
是否允許HTTP緩存
(默認(rèn): false)
spy-debugger -c true
更多
spy-debugger原理是集成了weinre穆趴,簡化了weinre需要給每個調(diào)試的頁面添加js代碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼带饱。讓頁面調(diào)試更加方便毡代。