騰訊的Web開發調試工具：Livepool

LivePool 是一個基于 NodeJS，類似 Fiddler 支持抓包和本地替換的 Web 開發調試工具，是 Tencent AlloyTeam 在開發實踐過程總結出的一套的便捷的 WorkFlow 以及調試方案。

版本

version: 0.7.5

特性

• 基于 NodeJS, 跨平臺

• 支持 http 抓包和本地替換調試，Https/WebSockets 直接代理轉發（暫不支持本地替換）

• 便捷的 UI 管理界面，跟 Fiddler 類似，降低學習成本

• 可以脫離 UI 后臺運行，適應于某些不需要抓包，只需要使用替換和簡單路由的場景

• 基于項目的替換規則管理，方便高效，規則支持拖曳排序

• 支持基于請求路徑的本地文件替換，支持基于請求路徑的路由轉發（host 配置）

• 替換類型支持：文件/文件夾替換，combo合并替換，qzmin替換（批量combo)，delay延時等

• 支持自動設置系統代理

• 支持規則過濾，只顯示關注的請求

• 提供構建 http get/post 請求界面，方便接口調試

• 特色功能：模擬gprs/3g等低網速（mac only）

• 特色功能：支持離線站點到本地，并自動代碼格式化

安裝

• 先安裝 nodejs, 參考官網 http://nodejs.org

從 git 下載安裝

• 下載， 運行 livepool

git clone https://github.com/rehorn/livepool

• 安裝依賴

cd ~/livepool
npm install

• 運行 livepool

node livepool.js

使用 npm 進行全局安裝

npm install livepool -g

• 運行 livepool

livepool

使用

• 將瀏覽器的代理設置為 http://127.0.0.1:8090, chrome 可以通過 switchsharp 進行

• 打開瀏覽器，http://127.0.0.1:8002

• 打開需要調試頁面地址，如 http://im.qq.com

界面說明

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）

使用 LivePool 進行抓包

攔截所有的 http 請求，查看分析請求內容

設置代理

瀏覽器代理

手動將瀏覽器代理設置為 127.0.0.1:8090, Chrome 可使用 SwitchSharp 等插件進行代理切換，這樣瀏覽器發出的所有的請求就能通過 livepool 中抓取

系統全局代理

livepool 可以設置系統全局代理，實現系統所有 http 請求的抓取

在 Session 中瀏覽請求

• 灰色背景：命中本地替換規則，并返回了本地內容的請求

• 綠色：js 請求

• 玫紅：css 請求

• 藍色：json 請求

• 黑色：其他類型請求

使用 inspector 查看請求內容

http request

可以查看http request的header，cookie等信息

http response

可以查看http response的header，cookie，視圖等信息

視圖切換

可以查看圖片、JSON、文本代碼，并且對代碼進行格式化，快速添加替換規則

tips: 便捷操作

• 雙擊 sesssion 區域請求，快速查看請求內容

• 在 TreeView 中節點，快速滾動到該請求，并查看對應請求內容

• 右鍵復制請求 url

• 右鍵在瀏覽器打開該 url

• 右鍵 replay，再次發起該請求

本地替換開發

將瀏覽器請求替換為本地文件，進行線上調試或本地開發，修改立刻生效

新建項目

填寫項目名稱和根目錄

新建替換規則

填寫handler替換規則或router路由規則

文件替換規則

延時規則

將請求阻塞指定的時間，再返回給瀏覽器，可以用來測試極端網絡下資源阻塞的頁面表現

combo規則

將本地的多個文件合并為一個之后，返回給瀏覽器，多個文件路徑之間使用“|”作為間隔符，一般用來開發調試站點js/css資源分模塊進行文件存儲的情況

qzmin規則（批量combo規則）

combo規則批量版本，使用一個json文件指定合并規則，便于替換和管理，文件格式請參考范例，find.all.qzmin

文件替換

將某個請求攔截，并使用本地文件替換，返回瀏覽器，可以用于本地開發調試

文件夾替換

將指定路徑的請求，使用本地文件夾下同名文件進行替換（未找到對應文件則直接代理），返回瀏覽器，可以用于本地開發調試

tips: 便捷操作

• 拖曳規則可以將規則進行快速排序

• 從 session（界面區域1）拖曳請求到 Pool（界面區域4），可以快速創建本地替換規則

• 快捷鍵：shift+c 復制當前選中項目或規則

• 通過工具欄 export/import 進行規則的導入導出

路由規則

• 使用 ‘-’ 表示直接代理：將請求直接代理轉發到目標機器

• ip 路由：將命中的請求路由到指定機器（相當于配置 host）

請求構建器

模擬 http 請求，可以修改get/post請求參數

過濾器

使用規則過濾不重要的請求

日志

顯示系統信息、錯誤日志等

模擬低網速[mac]

模擬網絡質量較差網絡，查看站點表現

• GPRS: 48kbit/s

• Edge: 64kbit/s

• 3g: 348kbit/s

• ADSL: 768kbit/s

• WIFI: 2048kbit/s

離線站點到本地

• 將站點內容離線到本地，并自動代碼格式化，便于查看

• 站點保存到當前文件夾 Sites 下

快捷鍵

TODO

• 完善 Timeline時間軸、Stat統計界面

• LiveReload、AlloyDesinger集成，

• 支持構建工具 task 管理與運行，如 Grunt, Gulp, Mod

• More....

項目主頁：http://www.baiduhome.net/lib/view/home/1405928419257