SigTrace is a free, open-source VS Code extension for Angular, Vue, and Solid developers who are tired of guessing through console.log and browser debugger steps. It shows which signal changed, which computed re-ran, and which effect fired next, so you can find root cause faster.
Key Features
1. Visualizer Sidebar
Component Clustering & Auditing: Automatically groups signals, computed memos, and effects inside visual container cards corresponding to their parent components (e.g. FilterPanel, SearchResultsComponent).
Pinned vs Others Categories: Automatically splits signal logs into Pinned and Others sections. Pinned nodes survive logs clearing (tombstoned) to make comparison testing easy.
VS Code Style JSON Inspector: Formats complex object payloads line-by-line with vertical guidelines and collapsible guidelines. Retains expanded/collapsed node states during active updates.
Chronological Playback Timeline: Step backward and forward through a history of ticks, showing sequential event counter cards (e.g., event 1/7) with hide/unpin controls.
Focus Path Isolation: Click a node to immediately dim the rest of the graph, highlighting only that node's direct upstream producers and downstream subscribers.
Interactive Search & Hover Copy: Filter nodes and component containers instantly. Click the copy icon (⧉) next to any signal name on hover to copy it to clipboard.
