$inspect
$inspect仅在开发环境有效。在生产构建中它会变成空操作。
$inspect 符文大致等同于 console.log，不同之处在于当其参数发生变化时它会重新运行。$inspect 会深度跟踪响应式状态，这意味着使用细粒度响应性更新对象或数组内的内容会导致它重新触发(demo):
<script>
let count = $state(0);
let message = $state('hello');
$inspect(count, message); // 当 `count` 或 `message` 改变时会调用 console.log
</script>
<button onclick={() => count++}>递增</button>
<input bind:value={message} />$inspect(...).with
$inspect 返回一个 with 属性，你可以用回调函数调用它，该回调函数将代替 console.log 被调用。回调函数的第一个参数是 "init" 或 "update"；后续参数是传递给 $inspect 的值(demo):
<script>
let count = $state(0);
$inspect(count).with((type, count) => {
if (type === 'update') {
debugger; // 或者使用 `console.trace`，或任何你想要的
}
});
</script>
<button onclick={() => count++}>递增</button>一个找到某些更改的来源的便捷方法是将 console.trace 传递给 with：
function $inspect<[any]>(values_0: any): {
with: (fn: (type: "init" | "update", values_0: any) => void) => void;
}
namespace $inspect
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; });
$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 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
console.Console.trace(...data: any[]): void (+1 overload)trace);
$inspect.trace(...)
这个符文在 5.14 版本中添加，会使周围的函数在开发环境中被追踪。每当函数作为 effect 或 derived 的一部分重新运行时，控制台都会打印出哪些响应式状态导致了 effect 触发。
<script>
import { doSomeWork } from './elsewhere';
$effect(() => {
$inspect.trace();
doSomeWork();
});
</script>$inspect.trace 接受一个可选的第一参数，该参数将被用作标签。