Live Activity Table
See every signal, computed, and effect update in real-time. Sort by most recent, most active, or alphabetically. Filter by component or search by name.
Open Source · v1.1.3 · MIT License
The Missing Debugger
for Reactive Signals
Trace every signal write, computed re-evaluation, and effect chain — live — inside VS Code. Zero configuration required. Works with Angular, Vue 3, and SolidJS.
Zero config setup
No code refactoring
Free & open source
Signal / Computed / Effect
Component
Value
Updates
Activity
searchQuery
search-bar.ts:42
selectedTags
tag-selector.ts:108
filteredItems
item-list.ts:241
autoSyncEffect
sync-engine.ts:83
userSettings
user-context.ts:15
SigTrace by the numbers
3
Frameworks Supported
0
Lines of Code Required
~2ms
Avg. Instrumentation Overhead
MIT
Open Source License
Features
Everything you need to understand
Everything you need to understand
your reactive state
SigTrace gives you full visibility into your signal graph — from individual reads and writes to full causal chains spanning multiple components.
Causal Chain Timeline
Every signal write triggers a chain view showing exactly which computed values re-evaluated and which effects ran — with precise millisecond timing and hotspot detection.
Component Panel
Group signals by component. Identify unused signals, locate the slowest computed nodes, and understand which components drive the most reactive work.
Click-to-Navigate
Every signal row shows its source file and line number. Click once to jump directly to the declaration in your editor. Double-click any row to navigate instantly.
Full Value Inspector
Click to expand any signal and see its complete, pretty-printed JSON value with no truncation. Hover over values in the timeline for full content tooltips.
Zero Configuration
No decorators. No imports to change. No config files. Just prefix your dev server command with npx sigtrace run and start debugging instantly.
Compatibility
Works with your stack
SigTrace ships with dedicated adapters for every major reactive framework. One extension, one dashboard, all your signals.
🅰️
Angular
v17+ · Signals, computed, effect, toSignal
💚
Vue 3
v3.3+ · ref, computed, watchEffect
🔷
SolidJS
v1.8+ · createSignal, createMemo, createEffect
⚛️
React
Coming soon Planned
🧡
Svelte 5
Coming soon Planned
Get Started
Up and running in under 2 minutes
SigTrace requires no code changes to your application. The AST compiler instruments your signals automatically at build time.
Install the VS Code Extension
Search "SigTrace" in the VS Code marketplace and click Install. Open the SigTrace panel from the Explorer sidebar.
Install the npm packages
Add @sigtrace/core and @sigtrace/vite as dev dependencies.
Start your dev server with SigTrace
Prefix your Angular/Vue/Solid serve command with npx sigtrace run. No config files needed.
Open your app and watch signals flow
Interact with your application. Every signal write, computed re-eval, and effect chain appears live in the VS Code dashboard.
# Step 1: Install packages
npm install --save-dev @sigtrace/core @sigtrace/vite
# Step 2: Start your dev server with sigtrace
npx sigtrace run ng serve
# That's it. No code changes needed.
# toSignal, signal(), computed() are all tracked automatically.
# Your signals in Angular:
userProfile = toSignal(
this.store.select(selectUserProfile),
{ initialValue: null }
); // ← tracked automatically ✓
npm install --save-dev @sigtrace/core @sigtrace/vite
# Step 2: Start your dev server with sigtrace
npx sigtrace run ng serve
# That's it. No code changes needed.
# toSignal, signal(), computed() are all tracked automatically.
# Your signals in Angular:
userProfile = toSignal(
this.store.select(selectUserProfile),
{ initialValue: null }
); // ← tracked automatically ✓
FAQ
Frequently asked questions
SigTrace is a real-time signal lifecycle tracer that works inside VS Code — not in the browser. Unlike Angular DevTools (which shows component trees), SigTrace focuses on the reactive signal graph: every signal write, computed dependency evaluation, and effect execution is shown as a live causal chain. It also supports Vue 3 and SolidJS, not just Angular.
No. SigTrace uses a zero-refactoring approach. An AST compiler plugin automatically instruments your signal calls at build time. Simply prefix your serve command with
npx sigtrace run and all signals are tracked without any imports, decorators, or code changes.Yes, fully supported as of v1.1.3. SigTrace intercepts the Observable stream, registers each emission as a signal write event, and displays the signal name, component, source file location, and full value history in the dashboard. This works with NgRx Store selectors and any other RxJS observables wrapped with toSignal.
SigTrace is designed for development only and adds approximately 1–3ms of overhead per signal write due to WebSocket event transmission. The instrumentation is stripped in production builds automatically. The dashboard updates are batched and rendered asynchronously so your app UI is never blocked.
SigTrace is 100% free and open source under the MIT license. All packages — @sigtrace/core, @sigtrace/vite, and the VS Code extension — are free forever. The source code is available on GitHub and contributions are welcome.
Yes. SigTrace uses a self-healing extension host clustering protocol. The first VS Code window acts as the WebSocket host. Additional windows connect automatically as clients and receive all signal events in real-time. If the host window closes, a client window automatically promotes itself to the new host.
Free & Open Source
Debug your reactive state
Debug your reactive state
in minutes, not hours
Install SigTrace and get full visibility into your signal graph — for free, forever.