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.