SvelteRunes

$inspect

$inspect は開発中のみ動作します。本番ビルドでは何もしない (noop) ものになります。

$inspect rune はおおむね console.log と同等ですが、引数が変更されるたびに再実行される点が異なります。$inspect はリアクティブな state を深く追跡し、オブジェクトや配列内のプロパティやアイテムなどをきめ細やかなリアクティビティで更新すると、再度発火します (デモ):

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

$inspect(...).with

$inspect は with プロパティを返します。このプロパティにはコールバックを渡すことができ、console.log の代わりにそのコールバックが呼び出されます。コールバックの最初の引数は "init" または "update" で、以降の引数には $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>

変更の起点を見つける便利な方法は、with に console.trace を渡すことです:

function $inspect<[any]>(values_0: any): {
    with: (fn: (type: "init" | "update", values_0: any) => 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; });
https://svelte.dev/docs/svelte/$inspect
$inspect(stuff).with: (fn: (type: "init" | "update", values_0: any) => void) => voidwith(var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.trace(...data: any[]): void (+1 overload)MDN Reference
trace);

$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引数を受け取り、これがラベルとして使用されます。

Edit this page on GitHub llms.txt

previous next

$bindable $host