Aug 28, 2025
0 views
A minimal, terminal-style diagnostics panel for Framer canvases. It shows a live FPS sparkline, optional memory usage (Chromium’s performance.memory), and a toggleable console log feed with type filters and one-click export. Logs persist across reloads via localStorage so you can reproduce and retrieve issues.
//
Tags
Add DebugOverlayPro to your canvas; position as needed.
Click Show Logs to reveal filters (error/warn/info).
Reproduce the issue; logs persist in localStorage (debugLogs).
Click Export Logs to download logs.txt.
Hide or remove before publishing.
Quick FPS only: Add component, keep logs hidden.
Error hunt: Show Logs → enable only error filter → export after repro.
Memory check (Chromium): Watch heap MB trend; keep canvas interactions minimal for cleaner signal.
FPS: Counts RAF frames and pushes one value per second to a 100-point history; rendered as an SVG <polyline>.
Memory (Chromium): Reads performance.memory.usedJSHeapSize (MB) when available; same 100-point history + sparkline.
Console capture: Temporarily wraps console.error/warn/info, appends normalized messages to state + localStorage, then calls the original method. Restored on unmount.
Persistence & Export: Keeps the latest 100 lines in localStorage (debugLogs). Export creates a Blob and downloads logs.txt.
Histories capped (100 pts) and metrics committed once per second to minimize churn.
SVG polylines are cheap; avoid massive container resizes.
Heavy logging can still impact runtime—filter early and export/clear.
Memory graph: Chromium-only (performance.memory). Hidden elsewhere.
localStorage: May be unavailable in strict privacy modes; persistence then won’t work.
No SSR usage; runs client-side in Framer canvas/runtime.
Decorative diagnostic panel; if non-essential to users, set the container aria-hidden="true".
Terminal palette—ensure sufficient contrast against the page background if visible to end users.
Data scope: Captures console messages (which may include PII if your app logs it). Use filters; remove before production.
Storage: Logs persist in localStorage until cleared or overwritten.
No network calls; no external sinks for logs unless you export.
Decorative diagnostic panel; if non-essential to users, set the container aria-hidden="true".
Terminal palette—ensure sufficient contrast against the page background if visible to end users.
Data scope: Captures console messages (which may include PII if your app logs it). Use filters; remove before production.
Storage: Logs persist in localStorage until cleared or overwritten.
No network calls; no external sinks for logs unless you export.
Implementation & Framer adaptation by SecretoCho Design.
SecretoCho Design 2025
Provided “as is” for debugging purposes. Validate performance, privacy, and compliance for your project; remove before production if not intended for end users.
Stay ahead of the curve with insights into emerging visualization trends and technologies.