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.