You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
+2Lines changed: 2 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -63,6 +63,8 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
63
63
<button onclick={() => entries[1].text = 'baz'}>change second entry text</button>
64
64
```
65
65
66
+
> Only POJOs (plain of JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
67
+
66
68
## `$state.frozen`
67
69
68
70
State declared with `$state.frozen` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
+88Lines changed: 88 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -4,3 +4,91 @@ title: Debugging
4
4
5
5
-`@debug`
6
6
-`$inspect`
7
+
8
+
Svelte provides two built-in ways to debug your application.
9
+
10
+
## `$inspect`
11
+
12
+
The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its
13
+
argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object
14
+
or array using fine-grained reactivity will cause it to re-fire. ([Demo:](/#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA))
15
+
16
+
```svelte
17
+
<script>
18
+
let count = $state(0);
19
+
let message = $state('hello');
20
+
21
+
$inspect(count, message); // will console.log when `count` or `message` change
`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`, all following arguments are the values passed to `$inspect`. [Demo:](/#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)
29
+
30
+
```svelte
31
+
<script>
32
+
let count = $state(0);
33
+
34
+
$inspect(count).with((type, count) => {
35
+
if (type === 'update') {
36
+
debugger; // or `console.trace`, or whatever you want
A convenient way to find the origin of some change is to pass `console.trace` to `with`:
45
+
46
+
```js
47
+
// @errors: 2304
48
+
$inspect(stuff).with(console.trace);
49
+
```
50
+
51
+
> `$inspect` only works during development. In a production build it becomes a noop.
52
+
53
+
## @debug
54
+
55
+
```svelte
56
+
<!--- copy: false --->
57
+
{@debug}
58
+
```
59
+
60
+
```svelte
61
+
<!--- copy: false --->
62
+
{@debug var1, var2, ..., varN}
63
+
```
64
+
65
+
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
66
+
67
+
```svelte
68
+
<script>
69
+
let user = {
70
+
firstname: 'Ada',
71
+
lastname: 'Lovelace'
72
+
};
73
+
</script>
74
+
75
+
{@debug user}
76
+
77
+
<h1>Hello {user.firstname}!</h1>
78
+
```
79
+
80
+
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
81
+
82
+
```svelte
83
+
<!-- Compiles -->
84
+
{@debug user}
85
+
{@debug user1, user2, user3}
86
+
87
+
<!-- WON'T compile -->
88
+
{@debug user.firstname}
89
+
{@debug myArray[0]}
90
+
{@debug !isReady}
91
+
{@debug typeof user === 'object'}
92
+
```
93
+
94
+
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
0 commit comments