Skip to content

Commit f5c3a50

Browse files
committed
debugging
1 parent 57fbef4 commit f5c3a50

File tree

2 files changed

+90
-0
lines changed

2 files changed

+90
-0
lines changed

apps/svelte.dev/content/docs/svelte/03-runes/01-state.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
6363
<button onclick={() => entries[1].text = 'baz'}>change second entry text</button>
6464
```
6565

66+
> Only POJOs (plain of JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
67+
6668
## `$state.frozen`
6769

6870
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:

apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,91 @@ title: Debugging
44

55
- `@debug`
66
- `$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
22+
</script>
23+
24+
<button onclick={() => count++}>Increment</button>
25+
<input bind:value={message} />
26+
```
27+
28+
`$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
37+
}
38+
});
39+
</script>
40+
41+
<button onclick={() => count++}>Increment</button>
42+
```
43+
44+
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

Comments
 (0)