Why Debugging with {@debug} in Svelte? - Purpose & Use Cases

The Big Idea

Discover how a simple tag can save you hours of frustrating bug hunts!

The Scenario

Imagine trying to find out why your Svelte app shows wrong data, but you have to add console.log everywhere and reload the page repeatedly.

The Problem

Manually adding console.log is slow, clutters your code, and you might miss important details or forget to remove logs later.

The Solution

The {@debug} tag in Svelte lets you pause and inspect variables right in your code during development, making it easy to see what's happening without extra clutter.

Before vs After

✗ Before

console.log(user);
console.log(items);

✓ After

{@debug user, items}

What It Enables

You can quickly spot and fix issues by seeing live variable values exactly where you need them in your component.

Real Life Example

When your shopping cart total is wrong, using {@debug} helps you check the cart items and prices instantly to find the mistake.

Key Takeaways

Manual logging is slow and messy.

{@debug} shows variables live in your Svelte component.

This makes finding bugs faster and cleaner.