spy-debugger 前端調試工具

特性

1、頁面調試＋抓包

2、操作簡單，無需USB連接配接裝置

3、支援HTTPS。

4、

spy-debugger

内部內建了

weinre

、

node-mitmproxy

、

AnyProxy

。

5、自動忽略原生App發起的https請求，隻攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。

6、可以配合其它代理工具一起使用(預設使用AnyProxy) (設定外部代理)

安裝

npm install spy-debugger -g
           

安裝成功後，把手機和電腦連到同一網絡環境下，在指令行執行

spy-debugger

正在啟動代理
本機在目前網絡下的IP位址為：xxx.xxx.xx.xx
node-mitmproxy啟動端口: 9888
浏覽器打開 ---> http://127.0.0.1:50094
           

步驟

第一步：手機和PC保持在同一網絡下（比如同時連到一個Wi-Fi下）

第二步：指令行輸入

spy-debugger

，按指令行提示用浏覽器打開相應位址。

第三步：設定手機的HTTP代理，代理IP位址設定為PC的IP位址，端口為

spy-debugger

的啟動端口(預設端口：9888)。

• Android設定代理步驟：

  設定 - WLAN - 長按選中網絡 - 修改網絡 - 進階 - 代理設定 - 手動

• iOS設定代理步驟：

  設定 - 無線區域網路 - 選中網絡 - HTTP代理手動

第四步：手機安裝證書。注：手機必須先設定完代理後再通過(非微信)手機浏覽器通路

http://s.xxx  

安裝證書（手機首次調試需要安裝證書，已安裝了證書的手機無需重複安裝)。

第五步：用手機浏覽器通路你要調試的頁面即可。

spy-debugger原理是內建了weinre，簡化了weinre需要給每個調試的頁面添加js代碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼。讓頁面調試更加友善。

ps:這個不會顯示樣式來源；能用真機模拟就用；不能的話這個不失為一個好工具