🛠️ DevTools - Signal Inspector & Debugger

Professional debugging tools for signals - inspect, profile, and visualize your reactive state!

📚 What You'll Learn

✓Enable DevTools with enableDevTools()
✓Track all active signals with the Inspector API
✓Profile performance and detect bottlenecks
✓Monitor dependency graphs and event streams
✓Integrate with React Native Flipper for mobile debugging

🎮 Try It: DevTools in Action

Update the counters below and see how DevTools tracks every change!

🛠️ DevTools Are Fully Implemented!

SignalForge includes comprehensive development tools for professional debugging:

✅ Signal Inspector - Track all active signals with unique IDs
✅ Dependency Graph - Visualize computed signal relationships
✅ Performance Profiling - Monitor update times and detect bottlenecks
✅ Event Streaming - Real-time monitoring of all signal events
✅ React Native Flipper - Full mobile debugging integration

📖 Quick Start:

import { enableDevTools } from 'signalforge/devtools';

// Enable in development only
if (process.env.NODE_ENV === 'development') {
  enableDevTools();
}

Counter 1

Counter 2

Counter 3

100

📊

Signal Graph Visualization

See how signals and computed values connect. Understand data flow at a glance with interactive dependency graphs.

⏱️

Performance Profiler

Track computation times, identify bottlenecks, and optimize your reactive code with detailed profiling data.

🔍

Signal Inspector

Inspect any signal's current value, history, and subscribers. Debug complex state interactions easily.

⏮️

Time Travel Debugging

Step back through signal changes, replay state transitions, and debug issues with full history playback.

import { enableDevTools } from 'signalforge/devtools';

// Enable DevTools (development only)
if (process.env.NODE_ENV === 'development') {
  enableDevTools();
}

// Your signals will now be tracked and visible in DevTools
const count = createSignal(0);
const doubled = createComputed(() => count.get() * 2);

// Open Chrome DevTools → SignalForge panel

📚 DevTools API Reference

enableDevTools(config?)

Enable DevTools with optional configuration for performance tracking, console logging, and Flipper integration.

listSignals()

Get a list of all active signals with their IDs, values, and dependency information.

getSignal(id)

Inspect a specific signal by ID to see its current value, subscribers, and dependencies.

getDependencyGraph()

Get the complete dependency graph showing how all signals and computed values are connected.

💡 Best Practices

🔒

Development Only

Always wrap enableDevTools() in a development check. DevTools are automatically disabled in production.

⚡

Zero Production Overhead

When disabled, all DevTools operations become no-ops with no performance impact.

📊

Performance Monitoring

Use the performance profiler to identify slow updates and optimize your reactive code.

🔍

Debug Complex Dependencies

Use getDependencyGraph() to visualize and understand complex signal relationships.

🎓 While You Wait

Explore other debugging and optimization demos:

Subscribe & Monitor →Time Travel →Performance →