しばしば、アプリを流れるデータを検査するのに便利です。
1つの方法は、マークアップの中で console.log(....) を使用することです。しかし、実行を一時停止したい場合は、{@debug ...}タグを使用して、検査したい値をカンマで区切ったリストで指定することができます。
App.svelte
{@debug user}
<h1>Hello {user.firstname}!</h1>新しく devtools を開いて <input> 要素とのやりとりを始めると、user の値が変わるたびにデバッガが動作します。(このチュートリアルでは、iframe のセキュリティ制限のため、コールスタックとローカル変数は非表示となります。)
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>