Debugging Objects in Svelte

Svelte has a special built-in @debug tag that will print a given object to the console when it is changed. Here is an example:

<script>
    let shape = {
        color: `red`,
        layout: `square`,
    };
</script>

{@debug shape}

In the above snippet, each time a change is made to the shape variable, the most recent object will be logged to the console.

If you’re familiar with reactive statements in Svelte, then this snippet with similar behavior may help you understand the @debug tag:

<script>
    let shape = {
        color: `red`,
        layout: `square`,
    };

    $: shape, console.log(shape);
</script>

Keep in mind that the @debug tag can only be used for objects and not variables of arbitrary types!

Conclusion

I hope you found this little snippet useful for more efficiently debugging your Svelte code!