Svelte • Runes

$inspect

On this page

$inspect(…).with
$inspect.trace(…)

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

<script lang="ts">
	let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(0);
	let let message: stringmessage = function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate('hello');

	function $inspect<[number, string]>(values_0: number, values_1: string): {
    with: (fn: (type: "init" | "update", values_0: number, values_1: string) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}$function $inspect<[number, string]>(values_0: number, values_1: string): {
    with: (fn: (type: "init" | "update", values_0: number, values_1: string) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}inspect(let count: numbercount, let message: stringmessage); // will console.log when `count` or `message` change
</script>

<button onclick={() => let count: numbercount++}>Increment</button>
<input bind:value={let message: stringmessage} />

<script>
	let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(0);
	let let message: stringmessage = function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<"hello">(initial: "hello"): "hello" (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate('hello');

	function $inspect<[number, string]>(values_0: number, values_1: string): {
    with: (fn: (type: "init" | "update", values_0: number, values_1: string) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}$function $inspect<[number, string]>(values_0: number, values_1: string): {
    with: (fn: (type: "init" | "update", values_0: number, values_1: string) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}inspect(let count: numbercount, let message: stringmessage); // will console.log when `count` or `message` change
</script>

<button onclick={() => let count: numbercount++}>Increment</button>
<input bind:value={let message: stringmessage} />

On updates, a stack trace will be printed, making it easy to find the origin of a state change (unless you’re in the playground, due to technical limitations).

$inspect(…).with

$inspect(...) returns an object with a with method, which you can invoke with a callback that 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:

<script lang="ts">
	let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(0);

	function $inspect<[number]>(values_0: number): {
    with: (fn: (type: "init" | "update", values_0: number) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}$function $inspect<[number]>(values_0: number): {
    with: (fn: (type: "init" | "update", values_0: number) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}inspect(let count: numbercount).with: (fn: (type: "init" | "update", values_0: number) => void) => voidwith((type: "init" | "update"type, count: numbercount) => {
		if (type: "init" | "update"type === 'update') {
			debugger; // or `console.trace`, or whatever you want
		}
	});
</script>

<button onclick={() => let count: numbercount++}>Increment</button>

<script>
	let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(0);

	function $inspect<[number]>(values_0: number): {
    with: (fn: (type: "init" | "update", values_0: number) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}$function $inspect<[number]>(values_0: number): {
    with: (fn: (type: "init" | "update", values_0: number) => void) => void;
}
namespace $inspectInspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that
will be called with the value and the event type ('init' or 'update') on every change.
By default, the values will be logged to the console.
$inspect(x).with(console.trace);
$inspect(x, y).with(() => { debugger; });
@see{@link https://svelte.dev/docs/svelte/$inspect Documentation}inspect(let count: numbercount).with: (fn: (type: "init" | "update", values_0: number) => void) => voidwith((type: "init" | "update"type, count: numbercount) => {
		if (type: "init" | "update"type === 'update') {
			debugger; // or `console.trace`, or whatever you want
		}
	});
</script>

<button onclick={() => let count: numbercount++}>Increment</button>

$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 or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire.

<script lang="ts">
	import { doSomeWork } from './elsewhere';

	$effect(() => {
		// $inspect.trace must be the first statement of a function body
		$inspect.trace();
		doSomeWork();
	});
</script>

<script>
	import { doSomeWork } from './elsewhere';

	$effect(() => {
		// $inspect.trace must be the first statement of a function body
		$inspect.trace();
		doSomeWork();
	});
</script>

$inspect.trace takes an optional first argument which will be used as the label.