Skip to main content

Occasionally, it's useful to inspect a piece of data as it flows through your app.

One approach is to use console.log(...) inside your markup. If you want to pause execution, though, you can use the {@debug ...} tag with a comma-separated list of values you want to inspect:

App.svelte
{@debug user}

<h1>Hello {user.firstname}!</h1>

If you now open your devtools and start interacting with the <input> elements, you'll trigger the debugger as the value of user changes. (Note that the call stack and local variables will be hidden in this tutorial, because of iframe security restrictions.)

Next: Next steps

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>
 
<label>
	<input bind:value={user.firstname} />
	first name
</label>
 
<label>
	<input bind:value={user.lastname} />
	last name
</label>
 
{(console.log(user), '')}
 
<h1>Hello {user.firstname}!</h1>
initialising