Web Log — 瀏覽器流量擷取與查詢工具
把瀏覽器的 HTTP 與 WebSocket 流量持續留存在可查詢的緩衝區，讓分析工作能用自然語言檢索。
Open Source開源專案
本案例為 GWP4 自行開發的產品或研究專案，並非外部客戶委託案。列出的內容用於呈現實際技術能力與做法。
- 開發工具
- 流量擷取
- AI 輔助開發
- Chrome Extension
背景與問題
分析既有系統的網路行為時，瀏覽器內建的開發者工具有幾個硬限制：與除錯 API 互斥、重整就清空、無法程式化查詢。需要長時間觀察流量時，這些限制會直接卡住工作。
原本的處理方式
開著開發者工具人工翻找請求，重整後重來，靠截圖與筆記留存。
設計目標
- 流量能持續留存，不因重整而消失
- 能以程式或自然語言查詢歷史請求
- 不與其他除錯工具互斥
解決方案
以 Chrome Extension 持續攔截 HTTP(S) 與 WebSocket 流量，寫入記憶體中的 ring buffer，再透過 Claude Code skill 讓開發者用自然語言查詢特定請求與回應內容。
核心功能
- 持續攔截 HTTP(S) 與 WebSocket 流量
- 記憶體 ring buffer 留存
- 以自然語言查詢歷史流量
- 與 AI 開發工具整合
系統架構
Chrome Extension（MV3）攔截流量 → in-memory ring buffer → 本地查詢介面 → Claude Code skill 自然語言查詢。
技術選擇
- Chrome Extension MV3
- Claude Code skill
- TypeScript
開發過程與限制
- 受瀏覽器除錯 API 的既有限制影響，部分場景無法攔截
- ring buffer 為記憶體儲存，容量有上限
可驗證指標
以下皆為可查證的技術事實，不含未經驗證的成效數字。
- 擷取範圍
- HTTP(S) 與 WebSocket
- 儲存方式
- 記憶體 ring buffer
- 授權
- 開源（GitHub 公開）
可以延伸到哪些產業
- 需要分析既有系統行為的整合專案
- 導入 AI 輔助開發的工程團隊
- 測試與品質團隊的流量稽核