跳至主要內容

$inspect

$inspect 僅在開發期間有效。在生產版本中,它會變成空操作。

$inspect 符號大致等同於 console.log,但不同之處在於,當它的參數發生變化時,它會重新執行。$inspect 會深度追蹤響應式狀態,這表示使用細粒度響應式更新物件或陣列內部的內容會導致它重新觸發 (示範)

<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 會返回一個屬性 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>

一個找出變更來源的便利方式是將 console.trace 傳遞給 with

function $inspect<[any]>(values_0: any): {
    with: (fn: (type: "init" | "update", values_0: any) => void) => void;
}

Inspects 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.org.tw/docs/svelte/$inspect

$inspect
(stuff).with: (fn: (type: "init" | "update", values_0: any) => void) => voidwith(var console: Console

The 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 calling require('console').

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
@seesource
console
.Console.trace(...data: any[]): void (+1 overload)trace);

在 GitHub 上編輯此頁面

上一頁 下一頁