基于 Node.js 的跨平臺 Web 抓包替換工具 – LivePool
LivePool 是一個基于 NodeJS，類似 Fiddler 能夠支持抓包和本地替換的 Web 開發調試工具，是Tencent AlloyTeam 在開發實踐過程總結出的一套的便捷的 WorkFlow 以及調試方案。
一、背景：
在 Windows 平臺上，Fiddler 作為一款非常便捷好用的 Web 調試工具，深受廣大開發者的喜愛。而在 Mac 上，類似的工具，比如 Charles 等，收費并且功能非常有限，著實讓很多陸續把工作環境遷移到 Mac 的小伙伴剛到非常的不方便。難道真的要在 Mac 上裝個 Windows 或者開虛擬機跑 Fiddler 嗎？
Alloyteam 其實很早就開始實踐跨平臺的抓包和替換工具，基于 QT 的 Rythem，功能上基本能滿足要求，但是由于后續沒有熟悉 QT 平臺的人力投入，沒有持續更新和支持。出于折騰精神，決定用比較熟悉的 NodeJS 進行開發一款類似的代理替換工具，并嘗試借助 Web 便捷快速的 UI 能力搭建更美觀強大的管理界面。
二、特性：
基于 NodeJS, 跨平臺。
便捷的 UI 界面，跟 Fiddler 類似，降低學習成本
支持 http 抓包和本地替換調試，Https/WebSockets 直接代理轉發，暫不支持本地替換
基于項目的替換規則管理，方便高效，規則支持拖曳排序
支持基于請求路徑的本地文件替換，支持基于請求路徑的路由轉發（host 配置）
替換類型支持：文件/文件夾替換，combo合并替換，qzmin替換（批量combo)，delay延時等
支持自動設置系統代理
支持規則過濾，只顯示關注的請求
提供構建 http get/post 請求界面，方便接口調試
特色功能：模擬gprs/3g等低網速（mac only）
特色功能：支持離線站點到本地，并自動代碼格式化
三、安裝，使用
（1）安裝：
1.安裝 nodejs, 參考官網 http://nodejs.org
2.下載， 運行 livepool
從 git 下載安裝
git clone https://github.com/rehorn/livepool
3.安裝依賴
cd ~/livepool npm install 4.運行 livepool
node livepool.js
5.使用 npm 進行全局安裝
npm install livepool -g
6.運行 livepool
livepool （2）使用：
1.將瀏覽器的代理設置為 http://127.0.0.1:8090, chrome 可以通過 switchsharp 進行
打開瀏覽器，http://127.0.0.1:8002
打開需要調試頁面地址，如 http://im.qq.com
2.局域網調試（如 wifi局域網）
將瀏覽器的代理設置為對應的局域網ip http://192.168.1.*:8090, chrome 可以通過 switchsharp 進行
打開需要調試頁面地址，如 http://im.qq.com
3.調試移動 web 頁面
將手機的 wifi 連接代理設置為：服務器 192.168.1.*(對應的局域網 ip)，端口 8090
打開需要調試頁面地址，如 http://im.qq.com
4.網絡代理訪問
某些網絡環境下，比如公司內網，需要配置特定代理才能訪問外網，livepool 支持網絡代理訪問
找到當前運行目錄下 rules/global.js 配置文件，加上如下代理配置項目，重啟啟動即可proxy: http://proxy.tencent.com:8080
四、界面說明：
1.菜單區
2.Session（顯示所有http請求信息）
3.TreeView（使用樹狀結構顯示Session信息）
4.功能Tab: Pool（按照項目管理本地替換規則）
5.功能Tab: Inspector (session查看器，查看請求header，body等信息)
6.功能Tab: Composer（http請求模擬器，可以模擬http get/post請求）
7.功能Tab: Filter（session過濾器，根據規則過濾session，只保留關注的）
8.功能Tab: Log（日志顯示）
9.功能Tab: Timeline（session時間軸，comming soon）
10.功能Tab: Statics（統計，對站點性能進行評估，comming soon）
五、主要功能：
1.使用 LivePool 進行抓包
攔截所有的 http 請求，查看分析請求內容
2.設置代理
1）瀏覽器代理
手動將瀏覽器代理設置為 127.0.0.1:8090, Chrome 可使用 SwitchSharp 等插件進行代理切換，這樣瀏覽器發出的所有的請求就能通過 livepool 中抓取
2）系統全局代理
livepool 可以設置系統全局代理，實現系統所有 http 請求的抓取
3.在 Session 中瀏覽請求
1）灰色背景：命中本地替換規則，并返回了本地內容的請求.
2）綠色：js 請求.
3)玫紅：css 請求.
4)藍色：json 請求.
5)黑色：其他類型請求.
4.使用 inspector 查看請求內容
1)http request
可以查看http request的header，cookie等信息
2)http response
可以查看http response的header，cookie，視圖等信息
3)視圖切換
可以查看圖片、JSON、文本代碼，并且對代碼進行格式化，快速添加替換規則
4）tips: 便捷操作
雙擊 sesssion 區域請求，快速查看請求內容
在 TreeView 中節點，快速滾動到該請求，并查看對應請求內容
右鍵復制請求 url
右鍵在瀏覽器打開該 url
右鍵 replay，再次發起該請求
4.本地替換開發
將瀏覽器請求替換為本地文件，進行線上調試或本地開發，修改立刻生效
5.新建項目
填寫項目名稱和根目錄
6.新建替換規則
填寫handler替換規則或router路由規則
7.文件替換規則
8.延時規則
將請求阻塞指定的時間，再返回給瀏覽器，可以用來測試極端網絡下資源阻塞的頁面表現
9.combo規則
將本地的多個文件合并為一個之后，返回給瀏覽器，多個文件路徑之間使用“|”作為間隔符，一般用來開發調試站點js/css資源分模塊進行文件存儲的情況
10.qzmin規則（批量combo規則）
combo規則批量版本，使用一個json文件指定合并規則，便于替換和管理，文件格式請參考范例，find.all.qzmin
11.文件替換
將某個請求攔截，并使用本地文件替換，返回瀏覽器，可以用于本地開發調試
12.文件夾替換
將指定路徑的請求，使用本地文件夾下同名文件進行替換（未找到對應文件則直接代理），返回瀏覽器，可以用于本地開發調試
12.tips: 便捷操作
拖曳規則可以將規則進行快速排序
從 session（界面區域1）拖曳請求到 Pool（界面區域4），可以快速創建本地替換規則
快捷鍵：shift+c 復制當前選中項目或規則
通過工具欄 export/import 進行規則的導入導出
13.路由規則
1）使用 ‘-’ 表示直接代理：將請求直接代理轉發到目標機器
2）ip 路由：將命中的請求路由到指定機器（相當于配置 host）
14.請求構建器
模擬 http 請求，可以修改get/post請求參數
15.過濾器
使用規則過濾不重要的請求
16.日志
顯示系統信息、錯誤日志等
17.模擬低網速[mac]
模擬網絡質量較差網絡，查看站點表現
GPRS: 48kbit/s Edge: 64kbit/s 3g: 348kbit/s ADSL: 768kbit/s WIFI: 2048kbit/s
18.離線站點到本地
將站點內容離線到本地，并自動代碼格式化，便于查看
站點保存到當前文件夾 Sites 下
19.快捷鍵
