$inspect

$inspect ne fonctionne que lors du développement. Dans un build de production, ell n’est jamais exécutée.

La rune $inspect est plus ou moins équivalente à console.log, si ce n’est qu’elle va déclencher sa ré-exécution si sont argument est mis à jour. $inspect suit les changements d’états reactifs de manière profonde, ce qui signifie que mettre à jour quelque chose au sein d’un objet ou d’un tableau en utilisant la réactivité fine va déclencher sa ré-exécution (démo).

<script>
	let count = $state(0);
	let message = $state('coucou');

	$inspect(count, message); // sera affiché dans la console lorsque `count` ou `message` change
</script>

<button onclick={() => count++}>Incrémenter</button>
<input bind:value={message} />

Lors des mises à jour, une stack trace sera affichée, permettant de facilement trouver l’origine d’un changement d’état (sauf si vous êtes dans le bac à sable, à cause de limitations techniques).

$inspect(...).with

$inspect renvoie une propriété with, que vous pouvez exécuter avec un callback, qui sera ensuite utilisé à la place de console.log. Le premier argument du callback est soit "init" ou "update" ; les arguments suivants sont les valeurs passées à $inspect (démo)

<script>
	let count = $state(0);

	$inspect(count).with((type, count) => {
		if (type === 'update') {
			debugger; // ou  `console.trace`, ou ce que vous voulez
		}
	});
</script>

<button onclick={() => count++}>Incrémenter</button>

$inspect.trace(...)

Cette rune, ajoutée avec la version 5.14, déclenche le suivi de la fonction passée en argument. À chaque fois que la fonction est rejouée dans le cadre d’un effet ou d’une dérivation, des informations concernant les états réactifs ayant généré l’effet seront affichées dans la console.

<script>
	import { faireQqch } from './ailleurs';

	$effect(() => {
		// $inspect.trace doit être la première déclaration du corps d'une fonction
		$inspect.trace();
		faireQqch();
	});
</script>

$inspect.trace prend un argument optionnel qui peut être utilisé comme label.