API Monitor

Monitor web API requests without opening DevTools.

🚀 API Monitor – On-Page API Inspector 📝 SUMMARY No need to open Chrome DevTools. API Monitor displays and inspects XHR and Fetch API requests generated by the pages you actively visit, through a floating on-page panel. 🛠️ It supports request and response inspection, automatic JSON formatting, cURL command generation, and persistent logs across page reloads using session storage. 💡 ABOUT API MONITOR Switching between your application and Chrome DevTools can disrupt your workflow, and network logs are often lost after a page reload. API Monitor is a lightweight on-page API inspection tool that helps developers view API request and response information directly within the web page, making debugging more focused and efficient. ✨ KEY FEATURES ✅ On-Page API Inspection View API request information through a draggable floating panel without opening DevTools. ✅ Request and Response Details Displays URL, HTTP method, status code, response time, headers, and readable body content. Only API data generated by the pages you actively visit is displayed. ✅ Persistent Logs Across Reloads API request logs remain available after page reloads using session storage. ✅ Developer Assistance • Convert requests into cURL commands • Automatically format JSON responses for better readability ⚙️ FUNCTIONAL OVERVIEW 🔍 API Display and Filtering • Displays XMLHttpRequest (XHR) and Fetch API requests • Filter by URL keywords • Filter by HTTP methods • Configure allow or ignore domain lists 🧐 Detailed Inspection • Overview: URL, Method, Status Code, Response Time • Headers: Request and Response headers • Body: Readable view and copy support for request and response bodies 🎨 User Interface • Multiple floating panel styles • Dark mode and light mode support • Draggable, resizable, and minimizable panel 🔒 Privacy and Data Safety • All functionality runs locally in the browser • API data remains in browser memory or session storage • No data is sent to external servers ──────────────────────── 🚀 API Monitor – 網頁 API 檢視與除錯面板 📝 SUMMARY 無需開啟 Chrome DevTools (F12)。 API Monitor 會在頁面上以懸浮面板的方式，顯示並分析使用者當前瀏覽頁面所產生的 XHR / Fetch API 請求。 支援請求與回應資訊檢視、JSON 自動格式化、cURL 指令產生，以及頁面重新整理後的紀錄保留 (Session Storage)。 💡 ABOUT API MONITOR 是否覺得在開發或除錯時，頻繁切換 Chrome DevTools 影響操作體驗？🔄 或是在重新整理頁面後，Network 紀錄立即消失而難以追蹤問題？ API Monitor 是一款輕量化的頁面內 API 檢視工具，讓您在操作網頁的同時，即可查看 API 請求與回應的基本資訊，協助開發者更有效率地理解與除錯網頁行為。🎯 ✨ KEY FEATURES ✅ 頁面內 API 檢視 • 以可拖曳的懸浮面板顯示 API 請求資訊，無需切換至 DevTools ✅ 請求與回應資訊顯示 • 顯示 URL、HTTP Method、Status Code、回應時間、Headers 與可讀格式的 Body 內容。 (僅顯示使用者當前瀏覽頁面所產生的 API 資料) ✅ 頁面重新整理後紀錄保留 • 透過 Session Storage 設計，於重新整理頁面後仍可查看先前的 API 紀錄 ✅ 開發者輔助功能 • 將請求資訊轉換為 cURL 指令 • JSON 回應自動格式化，提升可讀性 ⚙️ FUNCTIONAL OVERVIEW 🔍 API 顯示與篩選 • 顯示 XMLHttpRequest（XHR）與 Fetch API 請求 • 支援 URL 關鍵字搜尋 • 支援 HTTP Method 篩選 • 可設定允許或忽略顯示的網域清單 🧐 詳細資訊檢視 • 基本資訊：URL、Method、Status Code、回應時間 • Headers：Request 與 Response Headers • Body：Request 與 Response Body 的可讀檢視與複製 🎨 使用者介面 • 多種懸浮面板樣式可選 • 支援深色模式與淺色模式 • 面板可拖曳、縮放與最小化，不影響原始頁面操作 🔒 隱私與資料安全 • 所有功能皆於本機瀏覽器中執行 • API 資料僅存在瀏覽器記憶體或 Session Storage • 不會將任何資料傳送至外部伺服器