새로 출시된 Svelte Devtools로 Svelte 앱 디버깅

Svelte 3을 사용할 때 약간의 골칫거리(Vue 또는 React에서 온 경우)는 Vue devtools와 같은 브라우저 플러그인이 없다는 것일 수 있습니다. 이 플러그인은 앱의 구성 요소 트리를 검사하고 구성 요소 상태에 직접 액세스할 수 있는 편리한 방법을 제공합니다.

이제 community created devtools extension for Svelte 에서 만든 Timothy Johnson 이 있습니다. 이 도구는 다른 프레임워크용 유사한 도구에서 볼 수 있는 기본 기능 중 일부를 제공합니다.

설치

파이어폭스 - Install from the official store
Chrome - 작성 시점에 확장 프로그램이 Chrome용으로 검토 중이므로 Readme의 지침에 따라 zip 패키지를 수동으로 다운로드해야 합니다. https://github.com/RedHatter/svelte-devtools/blob/master/README.md

용법

Svelte Devtools는 Svelte 버전 3.12 이상에서만 작동하므로 Svelte NPM 종속성을 업데이트했는지 확인하는 것이 좋습니다.

1. 새 Svelte 앱을 만들고 개발 모드를 활성화하여 컴파일합니다.

사용할 사용자 지정 Svelte 3 프로젝트가 없는 경우 기본 앱 템플릿을 사용할 수 있습니다.

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

npm run dev

2. Firefox 또는 Chrome에서 앱을 열고 F12를 누른 다음 "Svelte 탭"을 선택합니다.

3. 상태 및 구성 요소를 검사하고 표시되는 항목 필터링

기본 패널에서 포함된 모든 구성 요소와 HTML 요소를 보고 검사할 수 있습니다. 구성 요소의 소품은 요소/구성 요소 보기와 오른쪽의 상태 패널 모두에 표시됩니다.

props 및 state는 devtools에서 직접 업데이트할 수 있습니다.


예를 들어 HTML 요소를 숨기고 구성 요소만 표시하려는 경우 표시할 정보를 필터링할 수도 있습니다.


당신이 보는 것과 같이? 최소한 GitHub( https://github.com/RedHatter/svelte-devtools )에서 리포지토리에 별표를 표시하고 RedHatter이 도구 개선에 도움이 필요한지 확인하십시오.

또한 Svelte에 대한 이전 게시물을 확인하십시오.