Debugging with $inspect rune in Svelte 5

When working with Svelte 5, debugging reactive state can be challenging. The new $inspect rune provides a powerful solution that goes beyond traditional console.log() statements by automatically tracking changes in your reactive state.

What is $inspect?

$inspect is Svelte 5’s powerful debugging rune. It goes beyond console.log() by automatically tracking changes in your reactive state.

Basic Usage

The simplest way to use $inspect is to pass it a reactive variable:

<script>
  let count = $state(0);
  $inspect(count);
  // Logs every time count changes
</script>

Advanced Debugging

Custom Logging

For more control over how your data is logged, you can use custom logging functions:

<script>
  let user = $state({ name: 'Alice' });

  $inspect(user).with((type, value) => {
    if (type === 'update') {
      console.log('User updated:', value);
    }
  });
</script>

Function Tracing with Labels

You can add custom labels to better track what’s happening in your application:

<script>
  $effect(() => {
    // Optional custom label for better tracking
    $inspect.trace('User Data Update');
    updateData();
  });
</script>

Key Features

• Tracks deep changes in objects
• Works only in development
• Provides flexible debugging options
• Supports custom tracing labels

Pro Tips

• Remove $inspect before production
• Use for understanding complex reactive flows
• Combine with browser dev tools

Conclusion

Debugging just got easier with Svelte 5’s $inspect! This simple rune provides state tracking and flexible debugging options for understanding your application’s reactive behavior.