How to Debug Components in Svelte

In Svelte, you have the @debug expression, which can be used for inserting a debugger into your Svelte components:

{@debug}

You can also provide variables to @debug:

{@debug bug}
{@debug bug, fly, mosquito}

You can also provide a comma-separated list of variables as well. This will log out the values of the specified variables, every time they change.

Note that the @debug expression only works for variables, but not for expressions:

<!-- 🚨 These won’t compile -->
{@debug user.settings}
{@debug credit === 0}
{@debug !loggedIn}
{@debug items[0]}

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Debug expression in Svelte