component 10 / 28WORKING
SC Debug Overlay Pro
- type
- Code Component
- platform
- Framer
- last update
- read time
- 4–6 min
- license
- SecretoCho Design
demo · runs with JavaScript
In-canvas debug overlay for Framer that graphs FPS and (when supported) JS heap, captures console logs (error/warn/info) with filters, persists to localStorage, and lets you export logs as a text file.
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.
- Utilities
- Debug
Main
Overview
- Built With
- React, Web APIs (Performance, Device, localStorage), Framer Code Component API
- Layout Support
- Fully Responsive
- Orientation
- Overlay / Panel
- Ideal Use Case
- In-canvas debugging, performance tuning, QA sessions
Tags
Code comment
/** * SC Debug Overlay Pro * © SecretoCho Design 2025 (https://secretocho.design) * FPS + (Chromium) JS heap graphs, filtered console capture, persistent logs, * and one-click export. Terminal-style overlay for quick diagnostics. * @framerDisableUnlink * @framerSupportedLayoutWidth any * @framerSupportedLayoutHeight any * @framerIntrinsicWidth 300 * @framerIntrinsicHeight 240 */Dependencies
- Technologies
- None (no external libs)
- Notes
- Uses browser performance & localStorage; memory graph only on Chromium-based browsers.
Complexity
- Logic Level
- Low–Medium (RAF tick, console proxy, SVG sparkline)
- Runtime Cost
- Very Low (state updates once/sec; capped histories)
- Component Size
- ~2–3 KB (raw TSX)
- Notes
- Keep enabled only during debugging to avoid visual clutter.
Guide
Instructions
- 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.
Examples / Presets
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.
Mechanics
How it Works
- 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.
Performance & Tuning
- 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.
Compatibility & Limits
- 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.
Quality
Accessibility
- 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.
Security & Privacy
- 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.
Reference
Props
The CMS entry lists no props.
Notes & Tips
- Clear logs by removing the component or localStorage.removeItem("debugLogs").
- To customize colors/fonts, adjust inline styles (monospace + neon green by default).
- Keep as a topmost overlay via your layout (e.g., higher z-index wrapper).
Troubleshooting / FAQ
No memory graph shown.
Your browser likely doesn’t expose performance.memory (try Chrome/Edge).
Export does nothing.
Pop-ups/downloads blocked; allow downloads for this site.
Logs not persisting.
localStorage unavailable/disabled; try a different browser mode.
Source
Header comment
/** * SC Debug Overlay Pro * © SecretoCho Design 2025 (https://secretocho.design) * FPS + (Chromium) JS heap graphs, filtered console capture, persistent logs, * and one-click export. Terminal-style overlay for quick diagnostics. * @framerDisableUnlink * @framerSupportedLayoutWidth any * @framerSupportedLayoutHeight any * @framerIntrinsicWidth 300 * @framerIntrinsicHeight 240 */Key excerpt
console.error, warn and info are wrapped: every call still reaches the console, and the newest 100 are kept in state and localStorage.
useEffect(() => { const appendLog = (type: string, ...args: any[]) => { const message = args .map((a) => typeof a === "object" ? JSON.stringify(a) : String(a) ) .join(" ") setLogs((prev) => { const updated = [{ type, message }, ...prev.slice(0, 99)] localStorage.setItem("debugLogs", JSON.stringify(updated)) return updated }) } const orig = { error: console.error, warn: console.warn, info: console.info, } console.error = (...args) => { appendLog("error", ...args) orig.error(...args) } console.warn = (...args) => { appendLog("warn", ...args) orig.warn(...args) } console.info = (...args) => { appendLog("info", ...args) orig.info(...args) } return () => { console.error = orig.error console.warn = orig.warn console.info = orig.info } }, [])Credits
Credits
Implementation & Framer adaptation by SecretoCho Design.
- license
- SecretoCho Design
SecretoCho Design 2025
Disclaimer
Provided “as is” for debugging purposes. Validate performance, privacy, and compliance for your project; remove before production if not intended for end users.
Proves
Hiring a design engineer?
I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.
sc@secretocho.design