Part 3 / Special tags / The @debug tag
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
let user = {firstname: 'Ada',
lastname: 'Lovelace'
};
</script>
<input bind:value={user.firstname} /><input bind:value={user.lastname} />{(console.log(user), '')}<h1>Hello {user.firstname}!</h1>
initialising