Debugging with {@debug} in Svelte

Introduction

The {@debug} tag helps you see the current values of variables while your Svelte app runs. It makes finding mistakes easier.

You want to check what data a variable holds at a certain point.

You need to understand why your app shows wrong information.

You want to watch how values change when you interact with your app.

You are learning Svelte and want to see how state updates work.

Syntax

Svelte

{@debug variable1, variable2, ...}

Use {@debug} inside your Svelte component's markup.

List one or more variables separated by commas to inspect them.

Examples

Shows the current value of count.

Svelte

{@debug count}

Shows values of user and isLoggedIn together.

Svelte

{@debug user, isLoggedIn}

Sample Program

This simple Svelte component shows a button and a count number. When you click the button, the count increases. The {@debug count} tag logs the current value of count to the browser console, helping you watch it change live.

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Click me</button>
<p>Count is {count}</p>
{@debug count}

Important Notes

The {@debug} output appears in the browser console, not on the page.

Remove {@debug} tags before publishing your app to keep the console clean.

You can debug multiple variables at once by separating them with commas.

Summary

{@debug} helps you see variable values in the browser console while your app runs.

Use it inside your Svelte markup with variables you want to check.

It is a simple and quick way to find bugs and understand your app's state.