前言¶
網頁接口排查的一個常見痛點是：頁面功能正常，但拿不到它實際發出的請求。手動開開發者工具逐條看，響應體長、參數多，複製出來容易漏；換一臺機器又得重來一遍。更麻煩的是登錄態、動態參數這類只在瀏覽器上下文裏存在的東西，用命令行工具重新發請求往往不成立。
下面介紹的「數據抓包代碼」，就是把 Playwright 的瀏覽器自動化能力封裝成一個可調用的 Skill：在真實頁面環境裏攔截 XHR 與 Fetch，導出結構化報告。
這是什麼¶
「數據抓包代碼」是一個社區來源的 Agent Skill，座標 @user_7e77ad98/capure，由 user_7e77ad98 發佈維護，版本 1.0.0。它的目標不是做通用的網絡層抓包，而是針對瀏覽器內的接口請求：在頁面真實運行過程中捕獲 XHR 與 Fetch 的請求和響應，並可以按需生成 HAR 或 CSV 報告。
核心功能¶
已覈實的能力如下：
- 使用 Python + Playwright 做瀏覽器自動化，在頁面上下文裏運行，因此攜帶的是瀏覽器真實的 Cookie、LocalStorage 和登錄態。
- 捕獲頁面發出的 XHR 與 Fetch 請求及響應，包含 URL、請求方法、請求頭、請求體、響應狀態與響應體。
- 支持對瀏覽器請求做 Mock 或修改，便於前端調試時構造特定響應。
- 生成 HAR 或 CSV 格式的報告，方便後續分析或存檔。
- 標籤 requires_api_key=false，使用前不需要申請額外的 API Key。
安裝與啓用¶
官方地址是 https://api.skillhub.cn/user_7e77ad98/capure ，SkillHub 頁面爲 https://www.skillhub.cn/skills/user_7e77ad98/capure 。在 SkillHub 頁面按站內流程添加到 Agent 配置即可。
運行環境需要自備 Python 與 Playwright：
pip install playwright
playwright install chromium
代碼塊外說明：第一條安裝 Python 依賴，第二條下載 Playwright 所需的 Chromium 瀏覽器內核。已抓取資料中未給出具體的安裝命令、目錄約定或配置文件字段，此處不臆測；接入時以官方頁面說明爲準。
該 Skill 採用通用 SKILL.md 格式。資料中未區分 Cursor、Codex CLI、Claude Code 的接入差異，本文不做分別說明。
典型用法¶
已抓取資料給出的適用場景集中在需求表達層面，以下是可直接對 Agent 提出的任務描述：
- 抓某個網站的接口：說明目標網址，由 Skill 驅動瀏覽器訪問並捕獲接口請求。
- 看某個頁面請求了哪些 API：用於梳理頁面行爲，輸出請求清單。
- 抓包分析：拿到請求與響應後做歸類和解讀。
- 逆向某個 App 的 H5 頁面接口：前提是頁面運行在瀏覽器中，可走同樣的捕獲流程。
- 生成 HAR 文件：把捕獲結果導出爲 HAR，便於在 DevTools 或第三方工具中回放分析。
- Mock 接口響應：修改或替換頁面實際收到的響應，驗證前端分支邏輯。
觸發條件來自官方簡介：當需要抓取網頁接口、分析 API 請求、逆向前端接口、採集動態加載的數據、Mock 或修改瀏覽器請求、生成 HAR 或 CSV 報告時使用此技能。採集動態加載的數據依賴接口響應本身，不是獨立的功能項。
適用場景與注意¶
適合的場景：網頁接口逆向、前端接口調試、動態加載數據的採集、需要 HAR 或 CSV 存檔的接口分析。
不適用的場景，資料中明確給出兩條邊界：
- 抓 TCP/UDP 網絡層原始包：應使用 Wireshark 或 scapy。本 Skill 只工作在瀏覽器與頁面層面，看不到網絡層包。
- 抓移動原生 App 的流量：應使用 mitmproxy 加 frida。原生 App 不經過瀏覽器，Playwright 無法接入。
另外需要注意：捕獲範圍限於瀏覽器發出的 XHR 與 Fetch。頁面通過 WebSocket 或其他通道傳輸的數據不在本 Skill 的描述範圍內；遇到這類需求應先確認資料是否支持，不要默認可以抓到。
結尾¶
「數據抓包代碼」的價值在於把抓包這件事放進了自動化流程：瀏覽器自動打開頁面、攔截請求、輸出報告，省去手工在開發者工具裏逐條複製的步驟，並且保留了真實的登錄態上下文。它的邊界也很清楚，只覆蓋瀏覽器內的 XHR 與 Fetch。
官方地址：https://api.skillhub.cn/user_7e77ad98/capure
