API Monitor

Monitor web API requests without opening DevTools.

🚀 API Monitor v1.1.0 – Advanced On-Page API Inspector & Console Monitor 📝 SUMMARY No need to open Chrome DevTools. API Monitor displays and inspects XHR and Fetch API requests, plus application console logs directly through a floating on-page panel. 🛠️ It supports request and response inspection, automatic JSON formatting, cURL command generation, real-time console monitoring, multi-language support, and persistent logs across page reloads. 💡 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, monitor application logs, and debug more efficiently without leaving the web page. ✨ KEY FEATURES 🔧 v1.1.0 NEW FEATURES ✅ Console Log Monitoring • Real-time interception of console.log, console.warn, console.error, console.info, console.debug • Per-level filtering (Log, Info, Warn, Error, Debug, Table) • Keyword search across console messages • Stack trace tracking showing original file names and line numbers • Automatic deep object serialization ✅ Enhanced UI/UX • Version badge display on monitoring panel • Improved counter display (filtered / total format) • Better visual hierarchy and spacing • Refined dark/light mode styling 🎯 CORE 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. ✅ HTTP Method Support • GET, POST, PUT, DELETE, PATCH, HEAD • Color-coded method badges for quick identification ✅ Developer Assistance • Convert requests into cURL commands (one-click copy) • Automatically format JSON responses for better readability • Export and share requests with team members ⚙️ FUNCTIONAL OVERVIEW 🔍 Network Tab • Displays XMLHttpRequest (XHR) and Fetch API requests • Advanced filtering: - URL keyword search (hostname + pathname matching) - HTTP method filter (GET, POST, PUT, DELETE, PATCH, HEAD) - Status code filter (2xx, 3xx, 4xx, 5xx) - Latency/Duration range filter - Time range filter • Domain allow/block lists • Virtual scrolling for smooth rendering of large request lists 🧐 Detailed Inspection • Overview: URL, Method, Status Code, Response Time • Request Headers: Full header inspection and copying • Request Body: JSON preview, plain text, and FormData display • Response Headers: Complete header analysis • Response Body: Auto-formatting and syntax highlighting • cURL Export: One-click command generation for sharing with backend teams 📊 Console Tab (v1.1.0) • Real-time console log capture • Log level filtering (Log, Info, Warn, Error, Debug, Table) • Keyword search with highlighting • Source file tracking with accurate line numbers 💾 Application Tab • Local Storage inspection and management • Session Storage inspection and management • Cookie viewing and analysis • Storage size calculation and monitoring 🔐 Permissions Tab • Browser permission status monitoring • Real-time permission state detection • Camera, Microphone, Geolocation, and more 🎨 User Interface • Multiple floating panel styles: • Dark mode, light mode and classic mode support with system preference detection • 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 • No analytics or tracking 🌐 Browser Compatibility • Chrome/Chromium 90+ • Edge 90+ • Any Chromium-based browser with Manifest V3 support ──────────────────────── 🚀 API Monitor v1.1.0 – 進階網頁 API 檢視與控制台監控面板 📝 SUMMARY 無需開啟 Chrome DevTools (F12)。API Monitor 會在頁面上以懸浮面板的方式，顯示並分析使用者當前瀏覽頁面所產生的 XHR / Fetch API 請求及應用程式、主控日誌以及瀏覽器權限。 支援請求與回應資訊檢視、JSON 自動格式化、cURL 指令產生、實時控制台監控、多語言支援，以及頁面重新整理後的紀錄保留。 💡 ABOUT API MONITOR 是否覺得在開發或除錯時，頻繁切換 Chrome DevTools 影響操作體驗？🔄 或是在重新整理頁面後，Network 紀錄立即消失而難以追蹤問題？ API Monitor 是一款進階的頁面內 API 檢視工具，讓您在操作網頁的同時，即可查看 API 請求與回應的基本資訊、監控應用程式日誌，協助開發者更有效率地理解與除錯網頁行為。🎯 ✨ KEY FEATURES 🔧 v1.1.0 新功能 ✅ 主控台日誌監控 • 實時攔截 console.log、console.warn、console.error、console.info、console.debug • 按日誌級別篩選 (Log、Info、Warn、Error、Debug、Table) • 關鍵字搜尋日誌訊息 • 堆疊追蹤顯示原始檔案名稱和行號 • 自動深度序列化複雜對象 ✅ 增強的 UI/UX • 監控面板上的版本徽章顯示 • 改進的計數器顯示 (篩選 / 總數格式) • 更好的視覺層次和間距 • 精細化的深色/淺色模式樣式 🎯 核心功能 ✅ 頁面內 API 檢視 • 以可拖曳的懸浮面板顯示 API 請求資訊，無需切換至 DevTools ✅ 請求與回應資訊顯示 • 顯示 URL、HTTP Method、Status Code、回應時間、Headers 與可讀格式的 Body 內容 • 僅顯示使用者當前瀏覽頁面所產生的 API 資料 ✅ HTTP 方法支援 • GET、POST、PUT、DELETE、PATCH、HEAD • 色彩編碼的方法徽章便於快速識別 ✅ 開發者輔助功能 • 將請求資訊轉換為 cURL 指令（一鍵複製） • JSON 回應自動格式化 • 匯出並與團隊成員共享請求 ⚙️ 功能詳解 🔍 Network 標籤 • 顯示 XMLHttpRequest（XHR）與 Fetch API 請求 • 進階篩選： - URL 關鍵字搜尋（主機名稱 + 路徑匹配） - HTTP 方法篩選 (GET、POST、PUT、DELETE、PATCH、HEAD) - Status Code 篩選 (2xx、3xx、4xx、5xx) - 延遲/持續時間範圍篩選 - 時間範圍篩選 • 網域允許/黑名單 • 虛擬滾動確保大型請求列表的流暢呈現 🧐 詳細資訊檢視 • 基本資訊：URL、Method、Status Code、回應時間 • Request Headers：完整標頭檢查和複製 • Request Body：JSON 預覽、純文字和 FormData 顯示 • Response Headers：完整標頭分析 • Response Body：自動格式化和語法高亮 • cURL 匯出：一鍵產生指令與後端團隊分享 📊 控制台標籤 (v1.1.0) • 即時控制台日誌捕獲 • 日誌級別篩選 (Log、Info、Warn、Error、Debug、Table) • 關鍵字搜尋 • 原始檔案追蹤和準確行號 💾 應用程式標籤 • Local Storage 檢視和管理 • Session Storage 檢視和管理 • Cookie 檢視和分析 • 儲存空間大小計算和監控 🔐 權限標籤 • 瀏覽器權限狀態監控 • 實時權限狀態檢測 • 攝像頭、麥克風、地理定位等 🎨 使用者介面 • 多種懸浮面板樣式可選 • 支援深色模式、淺色模式以及經典模式 • 面板可拖曳、縮放與最小化，不影響原始頁面操作 🔒 隱私與資料安全 • 所有功能皆於本機瀏覽器中執行 • API 資料僅存在瀏覽器記憶體或 Session Storage • 不會將任何資料傳送至外部伺服器 • 無任何分析或追蹤機制 🌐 瀏覽器相容性 • Chrome/Chromium 90+ • Edge 90+ • 任何支援 Manifest V3 的 Chromium 衍生瀏覽器