阅读(369) (0)

Svelte The @debug tag

2023-02-22 16:30:00 更新

有时,在数据流经您的应用程序时检查它很有用。

一种方法是在标记中使用 ​console.log(...)​ 。但是,如果你想暂停执行,你可以使用 ​{@debug ...}​ 标签和你想要检查的以逗号分隔的值列表:

{@debug user}

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

如果您现在打开您的开发工具并开始与 ​<input>​ 元素交互,您将在​user​值更改时触发调试器。

示例代码

  • App.svelte

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

<input bind:value={user.firstname}>
<input bind:value={user.lastname}>

{@debug user}

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