mirror of https://github.com/sveltejs/svelte
62 lines
2.5 KiB
62 lines
2.5 KiB
---
|
|
title: $inspect
|
|
---
|
|
|
|
> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
|
|
|
|
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](/playground/untitled#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(...).with
|
|
|
|
`$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"`; subsequent arguments are the values passed to `$inspect` ([demo](/playground/untitled#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.trace(...)
|
|
|
|
This rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.
|
|
|
|
```svelte
|
|
<script>
|
|
import { doSomeWork } from './elsewhere';
|
|
|
|
$effect(() => {
|
|
+++$inspect.trace();+++
|
|
doSomeWork();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
`$inspect.trace` takes an optional first argument which will be used as the label.
|