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

Need a 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

Need a 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;

Need a 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}

Need a hint?

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