Debugging with {@debug} in Svelte - Step-by-Step Execution

Concept Flow - Debugging with {@debug}

Write Svelte component

↓

Insert {@debug} with variables

↓

Run app in browser

↓

Browser console shows variable states

↓

Change variables in code

↓

{@debug} updates console output

↓

Use info to fix bugs

↓

Repeat as needed

This flow shows how you add {@debug} in Svelte to watch variables in the browser console, helping you find and fix bugs step-by-step.

Execution Sample

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
{@debug count}
<button on:click={increment}>Add</button>

This Svelte code shows a count variable and a button that increases it. {@debug count} prints count's value in the browser console.

Execution Table

Step	Action	Variable 'count' Value	Console Output	UI Change
1	Component loads	0	Debug: count = 0	Button shown with label 'Add'
2	User clicks button	1	Debug: count = 1	Button shown, count updated internally
3	User clicks button again	2	Debug: count = 2	Button shown, count updated internally
4	No more clicks	2	Debug: count = 2	Button shown, no change
Exit	User stops clicking	N/A	Debug output remains current	UI stable

💡 Execution stops when user stops interacting; {@debug} shows latest variable state in console.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 3 Insights

Why doesn't {@debug} show output in the page but in the console?

Because {@debug} is designed to print variable states to the browser console, not the page UI. See execution_table rows where Console Output updates but UI Change does not show debug info.

What happens if I put {@debug} without variables inside?

It will show all component variables in the console. This helps when you want to see everything at once. Refer to the concept_flow where {@debug} can track multiple variables.

Does {@debug} slow down my app?

It only logs to the console and updates when variables change, so it has minimal impact. You can remove it after debugging to keep performance clean, as shown in the exit_note.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after the second button click?

A 1

B 0

C 2

D 3

💡 Hint

Check the 'Variable count Value' column at Step 3 in the execution_table.

At which step does the console first show 'Debug: count = 1'?

A Step 2

B Step 1

C Step 3

D Exit

💡 Hint

Look at the 'Console Output' column in the execution_table for when count changes to 1.

If you remove {@debug count} from the code, what changes in the execution_table?

A UI Change will stop updating

B Console Output column will be empty

C Variable 'count' will not change

D Button will not work

💡 Hint

Refer to the execution_table's Console Output column which depends on {@debug} to show variable states.

Concept Snapshot

Svelte {@debug} prints variable states to the browser console.
Place {@debug varName} in your component to watch that variable.
Updates happen automatically when variables change.
Helps find bugs by showing live values.
Remove {@debug} after debugging to clean console.

Full Transcript

This lesson shows how to use Svelte's {@debug} tag to watch variables during app execution. You add {@debug} with variable names inside your component. When you run the app and interact, the variable values print in the browser console. For example, a count variable starts at 0 and increases on button clicks. Each click updates the console with the new count. This helps you see live changes and find bugs easily. {@debug} does not show output on the page but only in the console. You can also use {@debug} without variables to see all component variables. It has minimal performance impact and should be removed after debugging. The execution table traces each step: initial load, clicks, and console outputs. The variable tracker shows how count changes from 0 to 2. Key moments clarify common confusions about console output and usage. Visual quiz questions test your understanding of the variable states and console logs. Overall, {@debug} is a simple, powerful tool to watch your Svelte app's internal state live.

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