$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} />

$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>

Удобный способ найти источник какого-либо изменения — передать console.trace в with:

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

$inspect.trace(…)

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

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

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

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