<img src="https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/719064e0-4be2-453e-937b-346afaec3942/original=true/719064e0-4be2-453e-937b-346afaec3942.jpeg" />Lightweight performance profiler for Stable Diffusion WebUI<h1 id="sd-webui-diagnostics">🔍 SD-WebUI Diagnostics</h1>A lightweight frontend profiler that runs directly inside your Stable Diffusion WebUI tab. Track extension startup times, JavaScript memory leaks, slow event handlers, network latency, frame drops, and UI blocking events — all in real time, without external tools or Python overhead.<hr /><h2 id="table-of-contents">📋 Table of Contents</h2><ul><li><a target="_blank" rel="ugc" href="https://github.com/eduardoabreu81/sd-webui-diagnostics#-whats-new">What's New</a></li><li><a target="_blank" rel="ugc" href="https://github.com/eduardoabreu81/sd-webui-diagnostics#-features">Features</a></li><li><a target="_blank" rel="ugc" href="https://github.com/eduardoabreu81/sd-webui-diagnostics#-installation">Installation</a></li><li><a target="_blank" rel="ugc" href="https://github.com/eduardoabreu81/sd-webui-diagnostics#-quick-start">Quick Start</a></li><li><a target="_blank" rel="ugc" href="https://github.com/eduardoabreu81/sd-webui-diagnostics#-changelog">Changelog</a></li><li><a target="_blank" rel="ugc" href="https://github.com/eduardoabreu81/sd-webui-diagnostics#-credits">Credits</a></li></ul><hr /><h2 id="what's-new">🆕 What's New</h2><h3 id="v0.2.0-3-state-floating-widget-+-magnetic-docking">v0.2.0 — 3-State Floating Widget + Magnetic Docking</h3><ul><li>Three UI States — Icon (minimal badge), Bar (compact header with badges), and Expanded (full panel with tabs). ⭐</li><li>Magnetic Corner Docking — Drag the handle (⋮⋮⋮) to any screen edge; widget snaps to the nearest corner and remembers its position. ⭐</li><li>Smart Auto-Collapse — Expanded panel automatically collapses back to your last minimized state (icon or bar) after 30s of inactivity.</li><li>Icon Metric Selector — Choose which metric appears on the icon badge: errors, INP, memory, FPS, or 🔍 lupa (via Settings).</li><li>Gradio 4 / Svelte Compatibility — Eliminated global event-listener patches that were breaking Forge Neo's tab system.</li></ul><h3 id="v0.1.0-cross-platform-frontend-profiler">v0.1.0 — Cross-Platform Frontend Profiler</h3><ul><li>Universal Compatibility — Works on AUTOMATIC1111, Forge, reForge, and Forge Neo (Gradio 3 &amp; 4). ⭐</li><li>FPS Meter + Real Frame Drops — Detects actual skipped frames by measuring frame delta timing, not just FPS averages. ⭐</li><li>Resource Loading Timeline — See which JS/CSS/images are slowing down your page load. ⭐</li><li>Gradio Call Timing — Measures how long each backend call takes (Generate, queue, predict) with separate tracking. ⭐</li><li>MutationObserver DOM Tracking — Detects in real time when extensions inject new nodes into the page. ⭐</li><li>Long Task Observer — Catches when the browser main thread blocks for &gt;50ms.</li><li>Auto-Collapse Panel — Panel closes automatically after 30s of inactivity so it never gets in your way.</li><li>Clear Metrics Button — Reset all data and start a fresh profiling session without reloading.</li></ul><hr /><h2 id="features">🎯 Features</h2>⭐ = Core Highlights<h3 id="performance-profiling">🔍 Performance Profiling</h3><ul><li>Startup Time per Extension — See exactly how long each extension takes to initialize via <code>onUiLoaded</code> / <code>onUiUpdate</code> hooks. ⭐</li><li>Input Delay (INP) — Detects when keystrokes, clicks, or slider moves get stuck waiting in the browser queue.</li><li>Layout Shifts (CLS) — Spot which UI elements jump around during page load.</li><li>Memory Timeline — Track JavaScript heap usage over time (Chrome only) to catch leaks. ⭐</li><li>FPS + Frame Drops — Real-time frames-per-second counter with actual drop detection based on frame timing. ⭐</li></ul><h3 id="network-and-api">🌐 Network &amp; API</h3><ul><li>Network Calls — Intercepts all <code>fetch</code> and <code>XMLHttpRequest</code> calls, showing URL, method, status, and duration. ⭐</li><li>Gradio Calls — Separates backend API calls (predict, queue, run) from generic network traffic so you know exactly how long Generate is taking. ⭐</li><li>Resource Loading — Uses <code>PerformanceObserver</code> to flag slow assets (scripts, stylesheets, images). ⭐</li></ul><h3 id="errors-and-debugging">🐛 Errors &amp; Debugging</h3><ul><li>Console Error Capture — Collects <code>console.error</code>, <code>console.warn</code>, and unhandled exceptions from all extensions in one place.</li><li>Slow Event Handlers — Wraps <code>addEventListener</code> to flag handlers freezing the UI for &gt;50ms.</li><li>Long Tasks — Detects main-thread blocks that make the interface unresponsive.</li></ul><h3 id="dom-and-extensions">📊 DOM &amp; Extensions</h3><ul><li>DOM Nodes by Extension — Counts how many HTML elements each extension injected, updated in real time via <code>MutationObserver</code>. ⭐</li><li>Live Badge Strip — Collapsed pill shows INP, CLS, FPS, network, errors, and more at a glance.</li></ul><h3 id="export-and-control">💾 Export &amp; Control</h3><ul><li>Export JSON Report — Downloads a full snapshot of all metrics for attaching to GitHub issues. ⭐</li><li>Clear Metrics — One-click reset without reloading the page.</li><li>Auto-Collapse — Panel hides itself after 30 seconds of inactivity.</li></ul><hr /><h2 id="installation">📦 Installation</h2><h3 id="inside-sd-webui-(recommended)">Inside SD WebUI (Recommended)</h3><ol><li>Open your WebUI and go to the Extensions tab.</li><li>Click on the Install from URL sub-tab.</li><li>Paste: <code>https://github.com/eduardoabreu81/sd-webui-diagnostics</code></li><li>Click Install.</li><li>Go to the Installed sub-tab and click Apply and restart UI.</li></ol>⚠️ Compatible with AUTOMATIC1111, Forge, reForge, and Forge Classic / Neo.<hr /><h2 id="quick-start">🚀 Quick Start</h2><ol><li>After reloading the WebUI, look for the small 🔍 pill in the bottom-right corner.</li><li>Click it to expand the diagnostics panel.</li><li>Interact with your WebUI (type in the prompt box, click Generate, switch tabs).</li><li>Watch the badges update in real time — red badges mean something is slow!</li><li>Click any section to see detailed bars and timings.</li><li>Found a problem? Click 📥 Export JSON Report and attach the file to your issue.</li></ol><hr /><h2 id="changelog">📖 Changelog</h2><h3 id="v0.2.0-3-state-floating-widget-+-magnetic-docking-(2026-05-07)">v0.2.0 — 3-State Floating Widget + Magnetic Docking (2026-05-07)</h3><ul><li>Three UI States — Icon (minimal badge), Bar (compact header), Expanded (full panel).</li><li>Magnetic Corner Docking — Drag handle (⋮⋮⋮) to any edge; snaps to nearest corner.</li><li>Smart Auto-Collapse — Returns to last minimized state (icon/bar) after 30s inactivity.</li><li>Settings: <code>icon_metric</code>, <code>default_state</code>, <code>position_anchor</code>.</li><li>Gradio 4 / Svelte fixes — Safe <code>addEventListener</code> wrapper (no <code>JSON.stringify</code>), event delegation instead of inline handlers, retry-based <code>init()</code> for async DOM.</li></ul><h3 id="v0.1.0-cross-platform-frontend-profiler">v0.1.0 — Cross-Platform Frontend Profiler</h3><ul><li>Universal compatibility with A1111, Forge, reForge, and Forge Neo.</li><li>FPS meter with real frame-drop detection.</li><li>Resource loading timeline.</li><li>Gradio call timing (predict, queue, run).</li><li>MutationObserver for real-time DOM tracking.</li><li>Long task observer for main-thread blocking.</li><li>Auto-collapse panel after inactivity.</li><li>Clear metrics button.</li><li>Fixed <code>removeEventListener</code> memory leak via <code>WeakMap</code>.</li></ul><hr /><h2 id="credits">📄 Credits</h2><ul><li>Built for the Stable Diffusion WebUI community.</li><li>Inspired by the need to debug extension performance without guessing.</li></ul>

Stable Diffusion WebUI Diagnostics

v0.2.0 — 3-State Floating Widget + Magnetic Docking<ul><li>Three UI States — Icon (minimal badge), Bar (compact header with badges), and Expanded (full panel with tabs). ⭐</li><li>Magnetic Corner Docking — Drag the handle (⋮⋮⋮) to any screen edge; widget snaps to the nearest corner and remembers its position. ⭐</li><li>Smart Auto-Collapse — Expanded panel automatically collapses back to your last minimized state (icon or bar) after 30s of inactivity.</li><li>Icon Metric Selector — Choose which metric appears on the icon badge: errors, INP, memory, FPS, or 🔍 lupa (via Settings).</li><li>Gradio 4 / Svelte Compatibility — Eliminated global event-listener patches that were breaking Forge Neo's tab system.</li></ul>v0.1.0 — Cross-Platform Frontend Profiler<ul><li>Universal Compatibility — Works on AUTOMATIC1111, Forge, reForge, and Forge Neo (Gradio 3 &amp; 4). ⭐</li><li>FPS Meter + Real Frame Drops — Detects actual skipped frames by measuring frame delta timing, not just FPS averages. ⭐</li><li>Resource Loading Timeline — See which JS/CSS/images are slowing down your page load. ⭐</li><li>Gradio Call Timing — Measures how long each backend call takes (Generate, queue, predict) with separate tracking. ⭐</li><li>MutationObserver DOM Tracking — Detects in real time when extensions inject new nodes into the page. ⭐</li><li>Long Task Observer — Catches when the browser main thread blocks for &gt;50ms.</li><li>Auto-Collapse Panel — Panel closes automatically after 30s of inactivity so it never gets in your way.</li><li>Clear Metrics Button — Reset all data and start a fresh profiling session without reloading.</li></ul>

Files with SHA256: 6e4fb8517c6043c8db98518ca6422f802d0b9274dc7e86d5cd6ee3b224b4eda9