如何在開發時用PC端對移動端頁面進行調試


原文轉載於:https://cnodejs.org/topic/56ebdf2db705742136388f71

 

項目名稱: spy-debugger 項目地址:https://github.com/wuchangming/spy-debugger

關於spy-debugger

特性

1、頁面調試+抓包
2、操作簡單
3、支持HTTPS。
4、spy-debugger內部集成了weinrenode-mitmproxyAnyProxy
5、自動忽略原生App發起的https請求,只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。
6、可以配合其它代理工具一起使用(默認使用AnyProxy) (設置外部代理)

Demo

調試界面

demo.png

抓包界面

AnyProxy.jpg

安裝

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)。

第四步:安裝證書。注:手機必須先設置完代理后再通過(非微信)手機瀏覽器訪問http://spydebugger.com/cert安裝證書(手機首次調試需要安裝證書,已安裝了證書的手機無需重復安裝)。

第五步:用手機瀏覽器訪問你要調試的頁面即可。

自定義選項

端口

(默認端口:9888)

spy-debugger -p 8888

設置外部代理(默認使用AnyProxy)

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

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

是否讓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

更多

spy-debugger原理是集成了weinre,簡化了weinre需要給每個調試的頁面添加js代碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼。讓頁面調試更加方便。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM