TracePanel : 軌跡除錯器

⚡ TracePanel（軌跡除錯器）—— 前端與全端工程師必備的 DevTools 事故重播與除錯神器！ 還在為無法重現線上使用者的隨機 Bug（Heisenbug）而苦惱嗎？ TracePanel 為 Chrome 開發者工具（DevTools）注入「黑盒子行車記錄器」等級的強大追蹤能力。在您除錯時，自動維護前 30 秒記憶體環形緩衝區（Ring Buffer），精確記錄使用者的每一個操作點擊、網路請求、Redux 狀態流與 Console 錯誤！ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ 核心功能特色 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔄 30 秒記憶體環形緩衝（Crash Snapshot） • 無需手動錄影，隨時保留 Crash 發生前 30 秒所有操作軌跡與 Log。 • 遇到異常或崩潰，一鍵鎖定事故快照，絕不漏接隨機發生的 Bug！ 🎬 擬真 Bug Replay（視覺軌跡重播） • 在目標網頁上產生精準的螢光點擊指示圓點與波紋動畫。 • 支援 0.5x / 1x / 2x 倍速重播，如看重播般清晰還原使用者操作步驟。 ⚡ API Waterfall 瀑布圖與效能診斷 • 視覺化即時請求時間軸（DNS、Connect、TTFB、Download）。 • 快速揪出慢速 API（Slow Queries）、5xx 伺服器錯誤與 Web Vitals（LCP/CLS）效能瓶頸。 📜 智慧事件流與 Thread 摺疊過濾 • 將使用者點擊、輸入、導航與隨後引發的 API / Console 自動分群（Threaded Grouping）。 • 內建 #Redux、#GraphQL、#5xx Errors、#LongTask 快速過濾標籤。 📋 一鍵產生 GitHub / Jira Issue Markdown 報告 • 一鍵自動生成包含「環境資訊、最後 5 步操作、網路請求狀態、錯誤堆疊」的 Markdown 報告。 • 貼上即可建立清晰標準的 Bug Report，大幅減少團隊溝通成本。 🌐 支援 10 國多國語言 • 繁體中文、简体中文、English、日本語、한국어、Español、Français、Deutsch、Português、Русский。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 隱私與安全承諾 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • 100% 本地運作：所有日誌、軌跡與快照均儲存在本機瀏覽器記憶體，絕不上傳任何外部伺服器。 • 零追蹤、無廣告、開源安全。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 快速上手 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. 安裝 TracePanel 擴充功能。 2. 在任意網頁按 F12 打開 Chrome DevTools。 3. 切換至頂部的「TracePanel」標籤頁，即可開始享受高效率除錯體驗！ ⚡ TracePanel : DevTools Bug Replay & Event Trace Debugger Stop struggling with hard-to-reproduce bugs! TracePanel brings "Blackbox Flight Recorder" power directly to Chrome DevTools. It continuously maintains a 30-second in-memory ring buffer of user interactions, network requests, Redux actions, and console errors — so you can replay and debug issues with zero guesswork. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔄 30-Second Ring Buffer & Crash Snapshot • Automatically keeps the last 30 seconds of user activity in a lightweight memory buffer. • Capture the exact sequence of events leading up to any bug or crash with a single click. 🎬 Realistic Visual Bug Replay • Replay user clicks, inputs, and navigation directly on the page with animated highlight cursors. • Adjustable playback speeds (0.5x / 1.0x / 2.0x) to easily trace tricky race conditions. ⚡ Network Waterfall & Performance Profiler • Visual timeline showing DNS, Connect, TTFB, and download timings for every API call. • Instantly identify 5xx server errors, slow endpoints, and Core Web Vitals (LCP, CLS) bottlenecks. 📜 Smart Event Stream & Threaded Grouping • Automatically group user actions (clicks/inputs) with their corresponding API calls and console logs. • One-click preset filters for #Redux, #GraphQL, #5xx Errors, and #LongTasks. 📋 One-Click GitHub & Jira Markdown Export • Generates a complete issue report with environment details, user action breadcrumbs, API summary, and error stack traces. • Paste directly into GitHub Issues, Jira, or Slack in seconds. 🌐 10 Built-in Languages • English, Traditional Chinese, Simplified Chinese, Japanese, Korean, Spanish, French, German, Portuguese, and Russian. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY & SECURITY FIRST ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • 100% Local & Offline: All logs, traces, and snapshots stay inside your browser memory. Zero external server uploads. • No telemetry, no tracking, no ads. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 GET STARTED IN SECONDS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Install TracePanel. 2. Open Chrome DevTools (F12 or Inspect) on any webpage. 3. Switch to the "TracePanel" tab and start debugging with superpower!