Debugging with {@debug} in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

🔧 Debug

intermediate

What does {@debug} output in this Svelte component?

Consider this Svelte component code:

  <script>
    let count = 5;
    let name = 'Svelte';
  </script>

  <button on:click={() => count++}>Increment</button>
  {@debug count, name}

What will {@debug} show in the browser console after the button is clicked twice?

Svelte

<script>
  let count = 5;
  let name = 'Svelte';
</script>

<button on:click={() => count++}>Increment</button>
{@debug count, name}

A Nothing logged because {@debug} only works on strings

B An object logged twice showing { count: 7, name: 'Svelte' }

C An object logged twice showing { count: 5, name: 'Svelte' }

D An error because {@debug} cannot log multiple variables

💡 Hint

Remember {@debug} logs the current values of variables whenever the component updates.

{@debug} logs the current values of the listed variables each time the component updates. After clicking twice, count increments from 5 to 7, name stays the same.

❓ component_behavior

intermediate

How does {@debug} behave with reactive statements?

Given this Svelte component:

  <script>
    let a = 1;
    let b = 2;
    $: sum = a + b;
  </script>

  {@debug a, b, sum}
  <button on:click={() => a++}>Increment A</button>

What will {@debug} log after clicking the button once?

Svelte

<script>
  let a = 1;
  let b = 2;
  $: sum = a + b;
</script>

{@debug a, b, sum}
<button on:click={() => a++}>Increment A</button>

A Throws a runtime error because sum is reactive

B Logs { a: 2, b: 2, sum: 3 } because sum does not update immediately

C Logs { a: 1, b: 2, sum: 3 } because {@debug} only logs initial values

D Logs { a: 2, b: 2, sum: 4 } reflecting updated reactive sum

💡 Hint

Reactive statements update before the component renders and {@debug} logs after updates.

The reactive statement recalculates sum when a changes. {@debug} logs the updated values after the reactive update.

📝 Syntax

advanced

Which {@debug} usage causes a syntax error?

Identify the option that will cause a syntax error in Svelte when using {@debug}:

A {@debug user}

B {@debug user, status}

C {@debug user status}

D {@debug (user, status)}

💡 Hint

Check the correct syntax for listing variables inside {@debug}.

{@debug} expects a comma-separated list of variables without parentheses. Missing commas cause syntax errors.

❓ state_output

advanced

What is the console output after this sequence with {@debug}?

Given this Svelte component:

  <script>
    let items = [1, 2];
    function addItem() {
      items = [...items, items.length + 1];
    }
  </script>

  {@debug items}
  <button on:click={addItem}>Add Item</button>

What will be logged after clicking the button three times?

Svelte

<script>
  let items = [1, 2];
  function addItem() {
    items = [...items, items.length + 1];
  }
</script>

{@debug items}
<button on:click={addItem}>Add Item</button>

A An array logged three times: [1,2,3], then [1,2,3,4], then [1,2,3,4,5]

B An error because spreading arrays in {@debug} is invalid

C An array logged once: [1,2,3,4,5] after three clicks

D An array logged three times: [1,2,3], then [1,2,3], then [1,2,3]

💡 Hint

Each click updates the items array by adding a new number at the end.

Each click triggers a state update. {@debug} logs the updated array after each change, showing the growing list.

🧠 Conceptual

expert

Why might {@debug} not show updated values in some cases?

In Svelte, sometimes {@debug} does not show the latest value of a variable after an update. Which reason below best explains this behavior?

A Because {@debug} logs values only after the component finishes updating, so synchronous mutations without assignment are not detected

B Because {@debug} only works with primitive types, not objects or arrays

C Because {@debug} requires explicit calls to refresh the log after every change

D Because {@debug} only logs values on initial component render, not on updates

💡 Hint

Think about how Svelte detects changes and triggers updates.

Svelte tracks changes by assignments. If you mutate an object or array without reassigning it, {@debug} won't see the change because no update was triggered.

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