Svelte • Template syntax

{@debug ...}

The {@debug ...} tag offers an alternative to console.log(...). It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.

<script lang="ts">
	let let user: {
    firstname: string;
    lastname: string;
}user = {
		firstname: stringfirstname: 'Ada',
		lastname: stringlastname: 'Lovelace'
	};
</script>

{@debug let user: {
    firstname: string;
    lastname: string;
}user}

<h1>Hello {let user: {
    firstname: string;
    lastname: string;
}user.firstname: stringfirstname}!</h1>

<script>
	let let user: {
    firstname: string;
    lastname: string;
}user = {
		firstname: stringfirstname: 'Ada',
		lastname: stringlastname: 'Lovelace'
	};
</script>

{@debug let user: {
    firstname: string;
    lastname: string;
}user}

<h1>Hello {let user: {
    firstname: string;
    lastname: string;
}user.firstname: stringfirstname}!</h1>

{@debug ...} accepts a comma-separated list of variable names (not arbitrary expressions).

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

The {@debug} tag without any arguments will insert a debugger statement that gets triggered when any state changes, as opposed to the specified variables.