這是什麼？
API Monitor 是一款為網頁開發者打造的 Chrome Extension，
讓你在 不開啟 DevTools 的情況下，即時查看頁面中的 API 請求。
DevTools 當然很強大，但在實際開發過程中，常常會遇到這些痛點：
- 忘了先打開 DevTools，結果 API 請求一閃而過，只能重跑流程
- 即使開了 DevTools，還要切到 Network Panel，查看 Headers / Request / Response 時不停切分頁
- Network Panel 裡混雜大量非 API 的檔案類型，需要人工篩選
- DevTools 會佔用畫面空間，影響 UI 檢視，也增加效能負擔
API Monitor 的目標很單純：
讓 API 資訊直接顯示在頁面上，專心看你真正關心的請求。
特色功能
頁面內 API 檢視
- 以 可拖曳的懸浮面板 顯示 API 請求資訊
- 無需切換至 DevTools，即可即時查看
請求與回應資訊顯示
- 顯示 URL、HTTP Method、Status Code、回應時間
- 支援 Headers 與可讀格式的 Response Body
- 僅顯示當前頁面所觸發的 API 請求
頁面重新整理後紀錄保留
- 透過 Session Storage 設計
- 即使重新整理頁面，也能保留先前的 API 紀錄
開發者輔助功能
- 一鍵將請求轉換為 cURL 指令
- JSON 回應自動格式化，提高閱讀與除錯效率
- 點擊區塊即可快速複製內容
隱私與資料安全
- 所有功能皆於 本機瀏覽器中執行
- API 資料僅存在瀏覽器記憶體或 Session Storage
- 不會將任何資料傳送至外部伺服器
使用的 AI 工具
- Manus：用於前期快速驗證想法與可行性
- ChatGPT / Gemini：交叉輔助功能設計、邏輯梳理與實作細節
開發心得
我是一名後端工程師，工作時經常需要同時查看多個功能頁面的 API 行為。
實務上，我常遇到這些狀況：
- 開了很多分頁，卻忘了先打開 DevTools
- 有些 API 只在畫面載入瞬間呼叫，一旦錯過就得重來
- DevTools 開久了，不只遮擋畫面，也明顯影響效能
因此，一開始的核心想法其實很簡單：
在不開 DevTools 的情況下，仍然能完整看到網頁 API 的所有資訊。
核心功能大約花了兩天完成：
每次頁面載入時，自動顯示一個浮動視窗，開始攔截 API 的基本資訊、 Headers 與 Body。
實際使用一段時間後，我發現有些 API（例如 GA）並不是我關心的重點，
於是加入了 bypass 清單，可以排除不需要監控的請求。
接著又遇到另一個問題：
原本監控狀態是所有分頁共用的，
午休滑社群、看 YouTube 或 Netflix 時，背景會產生大量 API，必須手動關閉。
但回到工作頁面後，又得重新打開監控。
因此後來改成：
- 每個分頁都有獨立的監控開關
- 可設定「監控所有網頁」或「僅允許指定網域」
最後，為了避免每次關掉面板都要重新點擊套件，
我加了一個 可拖曳的浮動按鈕，讓監控視窗能縮在左右側，
需要時一鍵展開，不打斷工作流程。
👇下載連結：
https://chromewebstore.google.com/detail/api-monitor/kjfdleikaoefkocddlckjnngcoahgljd
