mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.9 KiB
95 lines
2.9 KiB
4 months ago
|
---
|
||
|
|
title: Debugging
|
||
|
|
---
|
||
|
|
|
||
|
|
- `@debug`
|
||
|
|
- `$inspect`
|
||
|
|
|
||
|
|
Svelte provides two built-in ways to debug your application.
|
||
|
|
|
||
|
|
## `$inspect`
|
||
|
|
|
||
|
|
The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its
|
||
|
|
argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object
|
||
|
|
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))
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<script>
|
||
|
|
let count = $state(0);
|
||
|
|
let message = $state('hello');
|
||
|
|
|
||
|
|
$inspect(count, message); // will console.log when `count` or `message` change
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<button onclick={() => count++}>Increment</button>
|
||
|
|
<input bind:value={message} />
|
||
|
|
```
|
||
|
|
|
||
|
|
`$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)
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<script>
|
||
|
|
let count = $state(0);
|
||
|
|
|
||
|
|
$inspect(count).with((type, count) => {
|
||
|
|
if (type === 'update') {
|
||
|
|
debugger; // or `console.trace`, or whatever you want
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<button onclick={() => count++}>Increment</button>
|
||
|
|
```
|
||
|
|
|
||
|
|
A convenient way to find the origin of some change is to pass `console.trace` to `with`:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// @errors: 2304
|
||
|
|
$inspect(stuff).with(console.trace);
|
||
|
|
```
|
||
|
|
|
||
|
|
> `$inspect` only works during development. In a production build it becomes a noop.
|
||
|
|
|
||
|
|
## @debug
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
{@debug}
|
||
|
|
```
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
{@debug var1, var2, ..., varN}
|
||
|
|
```
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<script>
|
||
|
|
let user = {
|
||
|
|
firstname: 'Ada',
|
||
|
|
lastname: 'Lovelace'
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{@debug user}
|
||
|
|
|
||
|
|
<h1>Hello {user.firstname}!</h1>
|
||
|
|
```
|
||
|
|
|
||
|
|
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!-- Compiles -->
|
||
|
|
{@debug user}
|
||
|
|
{@debug user1, user2, user3}
|
||
|
|
|
||
|
|
<!-- WON'T compile -->
|
||
|
|
{@debug user.firstname}
|
||
|
|
{@debug myArray[0]}
|
||
|
|
{@debug !isReady}
|
||
|
|
{@debug typeof user === 'object'}
|
||
|
|
```
|
||
|
|
|
||
|
|
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
|