$inspect

$inspect は開発中のみ動作します。本番ビルドでは何もしない (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>
	let count = $state(0);
	let message = $state('hello');

	$inspect(count, message); // `count` や `message` が変更されると console.log が行われる
</script>

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

<script lang="ts">
	let count = $state(0);
	let message = $state('hello');

	$inspect(count, message); // `count` や `message` が変更されると console.log が行われる
</script>

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

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

<script lang="ts">
	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>

$inspect.trace(...)

この rune は 5.14 で追加され、開発中に周囲の関数を トレース することを可能にします。関数が effect または derived の一部として再実行されるたびに、どのリアクティブ state がその effect を引き起こしたかについての情報がコンソールに出力されます。

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

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

$inspect.trace はオプションで第1引数を受け取り、これがラベルとして使用されます。