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.