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.

Practice

1. What is the main purpose of the {@debug} tag in Svelte?

easy

A. To create a new reactive variable

B. To style variables with CSS inside the component

C. To print variable values to the browser console during app execution

D. To pause the app execution for debugging

Solution

1. Step 1: Understand the role of {@debug}

   The {@debug} tag is used to output variable values to the browser console while the app runs.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated features: styling, creating variables, or pausing execution, which {@debug} does not do.

3. Final Answer:

   To print variable values to the browser console during app execution -> Option C

4. Quick Check:

   {@debug} shows variables in console = A [OK]

Hint: Remember {@debug} logs variables to console automatically [OK]

Common Mistakes:

• Thinking {@debug} styles variables
• Confusing {@debug} with reactive declarations
• Assuming {@debug} pauses app execution

2. Which of the following is the correct syntax to debug variables count and name using {@debug} in Svelte?

easy

A. {@debug (count, name)}

B. {@debug count; name}

C. {@debug {count, name}}

D. {@debug count, name}

Solution

1. Step 1: Recall {@debug} syntax

   The correct syntax is {@debug} followed by variables separated by commas without parentheses or braces.

2. Step 2: Check each option

   {@debug count, name} matches the correct syntax. Options A, C, and D use invalid parentheses, braces, or semicolons which cause syntax errors.

3. Final Answer:

   {@debug count, name} -> Option D

4. Quick Check:

   Use commas without extra symbols in {@debug} [OK]

Hint: Use commas only, no parentheses or braces in {@debug} [OK]

Common Mistakes:

• Adding parentheses around variables
• Using braces instead of commas
• Separating variables with semicolons

3. Given this Svelte code snippet:

  <script>
    let count = 5;
    let name = 'Svelte';
  </script>
  
  {@debug count, name}

What will you see in the browser console when this component runs?

medium

A. The text 'count, name' printed in the console

B. An object showing { count: 5, name: 'Svelte' }

C. No output because {@debug} is only for development mode

D. A syntax error preventing the app from running

Solution

1. Step 1: Understand {@debug} output

   {@debug} prints the current values of the listed variables as an object in the console.

2. Step 2: Analyze given variables

   Variables count=5 and name='Svelte' will be shown as { count: 5, name: 'Svelte' } in the console.

3. Final Answer:

   An object showing { count: 5, name: 'Svelte' } -> Option B

4. Quick Check:

   {@debug} logs variable values as objects [OK]

Hint: Expect variable values as an object in console [OK]

Common Mistakes:

• Expecting text output instead of object
• Thinking {@debug} disables output in production
• Confusing syntax error with correct usage

4. You wrote this code:

<script>
  let count = 10;
</script>

{@debug count;}

But you get a syntax error. What is the problem?

medium

A. Using a semicolon after the variable inside {@debug} is invalid syntax

B. You must declare count as a reactive variable with $: before debugging

C. The {@debug} tag must be inside a <div> element

D. You forgot to import {@debug} from Svelte

Solution

1. Step 1: Check {@debug} syntax rules

   {@debug} expects variables separated by commas without semicolons or other punctuation.

2. Step 2: Identify the error

   The semicolon after count causes a syntax error because it is not allowed inside {@debug}.

3. Final Answer:

   Using a semicolon after the variable inside {@debug} is invalid syntax -> Option A

4. Quick Check:

   No semicolons inside {@debug} [OK]

Hint: Never put semicolons inside {@debug} brackets [OK]

Common Mistakes:

• Adding semicolons after variables in {@debug}
• Thinking {@debug} needs imports
• Placing {@debug} only inside HTML elements

5. You have a Svelte component with variables user (an object) and items (an array). You want to debug both and see their current values in the console whenever they change. Which is the best way to use {@debug} for this?

hard

A. {@debug user, items} placed inside the component markup

B. {@debug {user, items}} inside a reactive statement

C. {@debug user; items} inside the script tag

D. Use console.log(user, items) instead of {@debug}

Solution

1. Step 1: Recall correct {@debug} usage

   {@debug} is used inside the markup with variables separated by commas, no braces or semicolons.

2. Step 2: Evaluate options

   {@debug user, items} placed inside the component markup: {@debug user, items} placed inside the component markup is correct. Use console.log(user, items) instead of {@debug} uses console.log instead of {@debug}. {@debug {user, items}} inside a reactive statement uses invalid braces and incorrect placement in a reactive statement. {@debug user; items} inside the script tag uses semicolons and wrong placement inside the script tag.

3. Final Answer:

   {@debug user, items} placed inside the component markup -> Option A

4. Quick Check:

   {@debug with comma-separated vars in markup = D [OK]

Hint: Put {@debug} with comma-separated vars inside markup [OK]

Common Mistakes:

• Using braces or semicolons inside {@debug}
• Placing {@debug} inside script tag
• Confusing console.log with {@debug} usage