Debugging with {@debug} in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the {@debug} tag in Svelte?

The {@debug} tag helps you see the current values of variables in your component during development. It prints the variable names and their values in the browser console.

beginner

How do you use {@debug} to inspect multiple variables at once?

You list the variables inside the {@debug} tag separated by commas, like {@debug var1, var2}. This will log all their current values together.

beginner

Does {@debug} affect the rendered HTML output of a Svelte component?

No, {@debug} does not change what you see on the page. It only logs information to the browser console for debugging purposes.

beginner

When should you remove {@debug} tags from your Svelte code?

You should remove {@debug} tags before deploying your app to production to keep the console clean and avoid exposing internal state.

beginner

What is a real-life analogy for using {@debug} in your code?

It's like putting sticky notes on your desk showing important info while working. {@debug} shows you key variable values so you understand what your code is doing.

What does {@debug} do in a Svelte component?

A Logs variable values to the browser console

B Displays variables on the webpage

C Stops the app from running

D Saves variables to a file

{@debug} logs the current values of variables to the browser console for debugging.

How do you debug two variables, count and name, using {@debug}?

A {@debug (count, name)}

B {@debug count name}

C {@debug count, name}

D {@debug count; name}

You list variables separated by commas inside {@debug}, like {@debug count, name}.

Where do you see the output of {@debug} in Svelte?

A In a popup alert

B On the webpage

C In the terminal

D In the browser console

{@debug} outputs variable info to the browser's developer console.

Should {@debug} be left in your code when you publish your app?

A No, remove it before production

B Yes, it helps users

C Only if you want to slow down the app

D Only if you use it with CSS

Remove {@debug} before production to keep the console clean and protect internal info.

Which of these is NOT true about {@debug}?

A It helps find bugs

B It changes the page layout

C It logs variable values

D It is used during development

{@debug} does not affect page layout; it only logs info to the console.

Explain how you would use {@debug} to check the value of a variable in a Svelte component.

Think about how to write the tag and where you look for results.

Why is it important to remove {@debug} tags before deploying your Svelte app?

Consider what happens if debugging info is left visible to users.

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