時間の経過とともに変化する状態の値を追跡できると便利なことがよくあります。

addNumber関数の中に、console.logステートメントを追加しました。しかし、ボタンをクリックして（URLバーの右にあるボタンを使用して）コンソールドロワーを開くと、警告が表示され、メッセージを複製できなかったというメッセージが表示されます。

これは、numbersがリアクティブなプロキシであるためです。いくつかできることがあります。まず、$state.snapshot(...)を使って状態の非リアクティブなスナップショットを作成することができます。

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

あるいは、$inspectルーンを使用して、状態が変化するたびに自動的に状態のスナップショットをログに記録することもできます。このコードは、本番ビルドから自動的に削除されます。

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

$inspect(numbers);

$inspect(...).with(fn)を使用することで、情報の表示方法をカスタマイズできます。たとえば、console.traceを使用して、状態の変化がどこから発生したかを確認できます。

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