🚀 Svelte DX를 향상시키세요: Vite Svelte Inspector 가이드

Source: Dev.to

위의 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록, URL, 마크다운 형식 등은 그대로 유지됩니다.)

소개

브라우저에서 UI 요소를 바라보며, 그 요소가 정확히 어떤 컴포넌트 파일에 있는지 궁금해 본 적이 있나요?
Svelte와 Vite를 사용하고 있다면, 바로 그 문제를 해결해 주는 강력한 도구가 있습니다: @sveltejs/vite-plugin-svelte-inspector.
이 플러그인은 개발 중에 브라우저에 직접 DOM 인스펙터를 추가합니다. 활성화하면 요소 위에 마우스를 올려 파일 경로를 확인하고, 클릭하면 해당 위치를 자동으로 코드 편집기에서 열 수 있습니다.

설정

1. @sveltejs/vite-plugin-svelte가 설치되어 있는지 확인하세요(피어 의존성입니다).
2. 인스펙터는 Svelte 설정 로직에 내장되어 있으므로 최신 버전의 Svelte/Vite를 사용 중이라면 별도의 패키지가 필요하지 않습니다—그냥 활성화하면 됩니다.

기본 활성화

// svelte.config.js
export default {
  vitePlugin: {
    inspector: true
  }
};

사용자 정의 구성

인스펙터를 토글하는 방법이나 버튼 위치를 변경하고 싶다면, 불리언 대신 객체를 전달하세요:

// svelte.config.js
export default {
  vitePlugin: {
    inspector: {
      toggleKeyCombo: 'alt-x',
      showToggleButton: 'always',
      toggleButtonPos: 'bottom-right'
    }
  }
};

환경 변수

옵션은 환경 변수(쉘 또는 .env 파일)를 통해서도 설정할 수 있습니다. 이 경우 설정 파일보다 우선합니다.

# Set a custom key combo (unquoted string)
SVELTE_INSPECTOR_TOGGLE=alt-x

# Pass a full JSON options object
SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}'

# Disable it completely for your machine
SVELTE_INSPECTOR_OPTIONS=false

사용 가능한 옵션

탐색 및 접근성

키보드로 DOM 트리를 탐색할 수 있습니다:

• 부모: ArrowUp
• 자식: ArrowDown
• 다음 형제: ArrowRight
• 이전 형제: ArrowLeft

Enter 를 눌러 편집기를 열고, Backspace 또는 Escape 를 눌러 검사기를 닫습니다.

스타일링

customStyles가 활성화되면 플러그인이 최소한의 스타일시트를 삽입합니다. 직접 스타일링하고 싶다면:

• “ 은 svelte-inspector-enabled 클래스를 받습니다.
• 마우스를 올린 요소는 svelte-inspector-active-target 클래스를 받습니다.

이 클래스들을 자체 CSS에서 타겟팅하여 색상, 테두리 등을 사용자 정의할 수 있습니다.

편집기 통합

“클릭‑투‑오픈” 기능은 사용 중인 편집기가 인식되는지에 의존합니다. VS Code, WebStorm 등과 같은 표준 편집기는 기본적으로 지원됩니다. 편집기가 열리지 않을 경우:

1. 플러그인 README에 있는 Supported Editors 목록을 확인하세요.
2. Custom Editor 지침을 따라 특정 바이너리 경로나 명령을 설정하세요.

결론

디버깅을 즐기세요! 🐛➡️✨
가장 최신 옵션과 세부 사항은 GitHub의 공식 문서를 참조하세요.