Just yesterday the Svelte team introduced a new inspect rune. What does this rune do? It’s quite simple. The purpose is to watch a reactive value for changes, and to exectue a function whenever it updates.
In the example below we “inspect” the reactive count variable.
<script>
let count = $state(0);
$inspect(count, (value, type) => {
console.log(value, type);
});
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
clicks: {count}
</button>Here’s an example of the output:
0 "init"
1 "update"
2 "update"The first line appears after the component is first loaded, and the subsequent lines appear each time the value is updated. In our example, the update occurs each time the button in clicked. While we have specified a simple console.log you can put anything you like in this funciton. The function has access to the reactive value and the type of the change, which is either init or update.
The second parameter is optional. If you omit it, it will simply console.log the value. That is to say the following is equivalent, to the example above.
$inspect(count);Looking at the PR comments the team considered a $log rune, but this option allows for more flexiblity. You can call console.log if you like, or you can do anything that your heart desires.
Svelte 5 is still under active development, and the Svelte team is still adding new functionality. While the inspect rune is rather simple in nature, it helps making working with Svelte 5 that much easier. I can’t wait to see what the team comes up with next.