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

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

 

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

關於spy-debugger

特性

一、頁面調試＋抓包
二、操做簡單
三、支持HTTPS。
四、spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。
五、自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不形成任何影響。
六、能夠配合其它代理工具一塊兒使用(默認使用AnyProxy) (設置外部代理)

Demo

調試界面

抓包界面

安裝

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代碼。讓頁面調試更加方便。