$inspect — 반응형 디버깅

$inspect — 반응형 디버깅

$inspect 런은 대략 console.log와 같지만, 인자가 바뀔 때마다 다시 실행된다는 차이가 있어요. 반응형 상태를 깊게 추적해서, 객체·배열 안의 내용이 세밀한 반응성으로 갱신되면 다시 발화해요.

출처: https://svelte.dev/docs/svelte/$inspect

참고: $inspect는 개발 중에만 동작해요. 프로덕션 빌드에서는 noop(아무것도 안 함)이 돼요.

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

  $inspect(count, message); // `count` 나 `message` 가 바뀌면 console.log
</script>

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

$inspect(...).with

$inspect(...)는 with 메서드를 가진 객체를 반환해요. 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++}>Increment</button>

$inspect.trace(...)

5.14에서 추가된 이 런은 개발 중에 주변 함수를 추적(trace) 해요. 함수가 이펙트나 파생의 일부로 다시 실행될 때마다, 어떤 반응형 상태가 그 이펙트를 발화시켰는지에 대한 정보를 콘솔에 출력해요.

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

  $effect(() => {
    // $inspect.trace 는 함수 본문의 첫 문장이어야 합니다
    $inspect.trace();
    doSomeWork();
  });
</script>

$inspect.trace는 라벨로 쓰일 선택적 첫 인자를 받을 수 있어요.

더 알아보기