Skip to main content

It’s often useful to be able to track the value of a piece of state as it changes over time.

Inside the addNumber function, we’ve added a console.log statement. But if you click the button and open the console drawer (using the button to the right of the URL bar), you’ll see a warning, and a message saying the message could not be cloned.

That’s because numbers is a reactive proxy. There’s a couple of things we can do. Firstly, we can create a non-reactive snapshot of the state with $state.snapshot(...):

App
function addNumber() {
	numbers.push(numbers.length + 1);
	console.log($state.snapshot(numbers));
}

Alternatively, we can use the $inspect rune to automatically log a snapshot of the state whenever it changes. This code will automatically be stripped out of your production build:

App
function addNumber() {
	numbers.push(numbers.length + 1);
	console.log($state.snapshot(numbers));
}

$inspect(numbers);

You can customise how the information is displayed by using $inspect(...).with(fn) — for example, you can use console.trace to see where the state change originated from:

App
$inspect(numbers).with(console.trace);

Edit this page on GitHub

previous next
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	let numbers = $state([1, 2, 3, 4]);
	let total = $derived(numbers.reduce((t, n) => t + n, 0));
 
	function addNumber() {
		numbers.push(numbers.length + 1);
		console.log(numbers);
	}
</script>
 
<p>{numbers.join(' + ')} = {total}</p>
 
<button onclick={addNumber}>
	Add a number
</button>