본문으로 건너뛰기

Devtools

내 디바운서에도 전용 Devtools가 있을까요? 물론입니다!

TanStack Pacer는 등록된 모든 유틸리티를 실시간으로 관찰하고 디버깅할 수 있는 Devtools를 제공합니다. 이 도구는 TanStack Devtools의 다중 패널 UI 안에서 플러그인으로 실행됩니다.

[!NOTE] Devtools는 기본적으로 프로덕션 빌드에서 제외되므로 프로덕션 번들에 아무것도 추가하지 않습니다. 프로덕션에서 필요하다면 프로덕션 빌드를 참고합니다.

설치​

사용 중인 프레임워크용 Devtools 패키지를 설치합니다.

React​

npm install @tanstack/react-devtools @tanstack/react-pacer-devtools

Solid​

npm install @tanstack/solid-devtools @tanstack/solid-pacer-devtools

Angular​

곧 제공될 예정입니다...

기본 설정​

React 설정​

import { TanStackDevtools } from '@tanstack/react-devtools'
import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools'

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <TanStackDevtools
        eventBusConfig={{
          debug: false,
        }}
        plugins={[pacerDevtoolsPlugin()]}
      />
    </div>
  )
}

Solid 설정​

import { TanStackDevtools } from '@tanstack/solid-devtools'
import { pacerDevtoolsPlugin } from '@tanstack/solid-pacer-devtools'

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <TanStackDevtools
        eventBusConfig={{
          debug: false,
        }}
        plugins={[pacerDevtoolsPlugin()]}
      />
    </div>
  )
}

프로덕션 빌드​

기본 import는 프로덕션 빌드에서 아무 작업도 하지 않습니다.

// This is a no-op in production builds
import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools'

전체 Devtools로 프로덕션 문제를 디버깅하려면 프로덕션 전용 import로 전환합니다.

// This includes full devtools even in production builds
import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools/production'

유틸리티 등록​

유틸리티는 key를 지정한 경우에만 Devtools에 등록됩니다. 이 옵션을 생략하면 해당 인스턴스가 패널에 표시되지 않습니다.

const debouncer = new Debouncer(myDebounceFn, {
  key: 'My Debouncer', // friendly name shown in the devtools
  wait: 1000,
})