Debugging with {@debug} in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a debug statement that logs the variable count.

Svelte

<script>
  let count = 0;
  {@debug [1]
</script>

Drag options to blanks, or click blank then click option'

Acount

Bconsole.log(count)

Ccount++

Ddebug(count)

Attempts:

3 left

💡 Hint

Common Mistakes

Putting a function call like console.log inside {@debug}

Using increment operators inside {@debug}

Calling a debug function that doesn't exist

The {@debug} tag in Svelte logs the value of the variable you pass to it. You just need to put the variable name count inside the braces.

2fill in blank

medium

Complete the code to debug both name and age variables together.

Svelte

<script>
  let name = 'Alice';
  let age = 30;
  {@debug [1]
</script>

Drag options to blanks, or click blank then click option'

Aname, age

Bname age

C[name, age]

D{name, age}

Attempts:

3 left

💡 Hint

Common Mistakes

Separating variables with commas without braces

Using an array instead of an object

Writing variables without any separator

To debug multiple variables in Svelte, you pass an object with those variables inside {@debug}, like {@debug {name, age}}.

3fill in blank

hard

Fix the error in the debug statement that tries to log user but is missing braces.

Svelte

<script>
  let user = { name: 'Bob' };
  {@debug [1]
</script>

Drag options to blanks, or click blank then click option'

Auser

Buser.name

C{user}

Duser{}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the object variable without braces

Trying to access a property without braces

Using invalid syntax like user{}

When debugging an object in Svelte, you must wrap it in braces inside {@debug} to log its properties properly, like {@debug {user}}.

4fill in blank

hard

Fill both blanks to debug score and level variables as an object.

Svelte

<script>
  let score = 100;
  let level = 2;
  {@debug [1]
  {@debug [2]
</script>

Drag options to blanks, or click blank then click option'

A{score, level}

Bscore

Clevel

D{score}

Attempts:

3 left

💡 Hint

Common Mistakes

Not using braces for multiple variables

Trying to log multiple variables without grouping

Using invalid syntax for single variable debug

The first debug logs both variables as an object {@debug {score, level}}. The second debug logs just the score variable.

5fill in blank

hard

Fill all three blanks to debug userName, userAge, and isLoggedIn together as an object.

Svelte

<script>
  let userName = 'Eve';
  let userAge = 25;
  let isLoggedIn = true;
  {@debug [1]
  {@debug [2]
  {@debug [3]
</script>

Drag options to blanks, or click blank then click option'

A{userName, userAge, isLoggedIn}

BuserName

C{userAge, isLoggedIn}

DisLoggedIn

Attempts:

3 left

💡 Hint

Common Mistakes

Not grouping variables properly in the first debug

Using braces for single variables unnecessarily

Mixing variable names without commas

The first debug logs all three variables as an object. The second logs just userName. The third logs isLoggedIn.

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