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.