$inspect

Руна $inspect примерно эквивалентна console.log, за исключением того, что она будет повторно выполняться каждый раз, когда изменяется её аргумент. $inspect отслеживает реактивное состояние глубоко, что означает, что обновление чего-то внутри объекта или массива с использованием тонкой реактивности приведет к его повторному срабатыванию:

<script>
  let count = $state(0);
  let message = $state('привет');

  $inspect(count, message); // вывод в консоль при изменении `count` или `message`
</script>

<button onclick={() => count++}>Увеличить</button>
<input bind:value={message} />

<script lang="ts">
  let count = $state(0);
  let message = $state('привет');

  $inspect(count, message); // вывод в консоль при изменении `count` или `message`
</script>

<button onclick={() => count++}>Увеличить</button>
<input bind:value={message} />

При обновлениях будет напечатан стек-трейс, что облегчает поиск источника изменения состояния (если только вы не в песочнице, из-за технических ограничений).

$inspect(…).with

$inspect(...) возвращает объект с методом with, который можно вызвать с колбэком. Этот колбэк будет вызываться вместо console.log. Первый аргумент колбэка — это либо "init", либо "update"; последующие аргументы — это значения, переданные в $inspect:

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

  $inspect(count).with((type, count) => {
    if (type === 'update') {
      debugger; // или `console.trace`, или что угодно, что вам нужно
    }
  });
</script>

<button onclick={() => count++}>Увеличить</button>

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

  $inspect(count).with((type, count) => {
    if (type === 'update') {
      debugger; // или `console.trace`, или что угодно, что вам нужно
    }
  });
</script>

<button onclick={() => count++}>Увеличить</button>

$inspect.trace(…)

Эта руна, добавленная в версии 5.14, позволяет отслеживать окружение в процессе разработки. Каждый раз, когда функция выполняется повторно в контексте effect или derived, в консоль будет выводиться информация о том, какие части реактивного состояния вызвали срабатывание эффекта.

<script>
  import { doSomeWork } from './elsewhere';

  $effect(() => {
    // $inspect.trace должен быть первым оператором в теле функции
    $inspect.trace();
    doSomeWork();
  });
</script>

$inspect.trace принимает необязательный первый аргумент, который будет использоваться в качестве метки.