Debugging with {@debug} in Svelte - Mini Project: Build & Apply

Debugging with {@debug} in Svelte

📖 Scenario: You are building a simple Svelte component to display user information. You want to check the values of your variables during development to make sure everything is working correctly.

🎯 Goal: Learn how to use the {@debug} tag in Svelte to inspect variables and understand component state during development.

📋 What You'll Learn

Create a Svelte component with a user object

Add a boolean variable to control display

Use the {@debug} tag to inspect variables

Add a button to toggle the boolean variable

💡 Why This Matters

🌍 Real World

Using {@debug} helps developers see what data their Svelte components hold at any moment, making it easier to find and fix bugs.

💼 Career

Knowing how to debug effectively with framework tools like {@debug} is essential for frontend developers to build reliable and maintainable applications.

1

Create the user data object

Create a variable called user with an object containing these exact properties: name set to "Alice", age set to 30, and email set to "[e-mail]".

Svelte

# Your code here

// Create the user object

Hint

Use let user = { name: "Alice", age: 30, email: "[e-mail]" } inside the <script> tag.

2

Add a boolean variable to control display

Add a variable called showDetails and set it to true inside the <script> tag.

Svelte

  let user = { name: "Alice", age: 30, email: "[e-mail]" };
  
  // Add showDetails variable here

Hint

Declare let showDetails = true; inside the <script> tag.

3

Use {@debug} to inspect variables

Add the {@debug} tag inside the component to inspect the variables user and showDetails. Place it below the <script> tag but before any HTML markup.

Svelte

  let user = { name: "Alice", age: 30, email: "[e-mail]" };
  let showDetails = true;

Hint

Write {@debug user showDetails} in the component to see the current values of these variables.

4

Add a button to toggle showDetails

Add a button with the text Toggle Details that toggles the showDetails variable when clicked. Use the on:click event with a function that sets showDetails = !showDetails. Place the button below the {@debug} tag.

Svelte

  let user = { name: "Alice", age: 30, email: "[e-mail]" };
  let showDetails = true;


{@debug user showDetails}

Hint

Use <button on:click={() => showDetails = !showDetails}>Toggle Details</button> to toggle the boolean.

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