---
title: SC Debug Overlay Pro
description: A debug overlay that graphs FPS and heap, and captures console logs.
url: https://secretocho.design/lab/sc-debug-overlay-pro/
type: SoftwareSourceCode
status: working
published: 2025-08-28
updated: 2025-08-28
---

# SC Debug Overlay Pro

> A debug overlay that graphs FPS and heap, and captures console logs.

component 10 / 28 · WORKING

- **type**: Code Component
- **platform**: Framer
- **last update**: 2025-08-28
- **read time**: 4–6 min
- **license**: SecretoCho Design

![A still of the SC Debug Overlay Pro demo, as its module draws it with reduced motion.](https://secretocho.design/_astro/still.ilwKebll_ZGqUxI.webp)

*fig 00 · live demo, ported from **SC\_Debug\_Overlay.tsx***

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

- fps
- performance
- memory
- console
- logs
- debugging
- overlay
- export

### Code comment

```tsx
/**
 * 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

1. Add **DebugOverlayPro** to your canvas; position as needed.
2. Click **Show Logs** to reveal filters (error/warn/info).
3. Reproduce the issue; logs persist in localStorage (debugLogs).
4. Click **Export Logs** to download logs.txt.
5. 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.tsx · lines 4–14 · header comment*

```tsx
/**
 * 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
 */
```

[props \[REF\]](#reference)

### 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.

*SC\_Debug\_Overlay.tsx · lines 34–72 · tsx*

```tsx
    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

- [Creative coding](https://secretocho.design/about/#capabilities)

## 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](mailto:sc@secretocho.design)

[read the CV](https://secretocho.design/cv/) · [LinkedIn](https://www.linkedin.com/in/secretocho/)