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 are a couple of things we can do. Firstly, we can create a non-reactive snapshot of the state with $state.snapshot(...):

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:

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:

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