Debugging
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:
{@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.
App.svelte
xxxxxxxxxx
13
1
<script>
2
let user = {
3
firstname: 'Ada',
4
lastname: 'Lovelace'
5
};
6
</script>
7
8
<input bind:value={user.firstname}>
9
<input bind:value={user.lastname}>
10
11
{(console.log(user), '')}
12
13
<h1>Hello {user.firstname}!</h1>
Console
- Object {▶
- "Ada" ,
- "Lovelace"
xxxxxxxxxx
122
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
detach,
6
element,
7
init,
8
insert,
9
listen,
10
noop,
11
run_all,
12
safe_not_equal,
13
set_data,
14
set_input_value,
15
space,
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */