[Sveltekit] VSCode에서 디버깅하기 (Debugging)

sveltekit은 hot-reload가 되기 때문에

개발하면서 화면을 바로바로 확인할 수 있어서 정말 개발하기 편합니다.

 

그래도 ui로 디버깅을 하거나, console.log 명령어로 매번 프린트 디버깅을 하기엔 

시간소모와 공수가 많이 듭니다. 

거기다가 api의 응답 데이터를 보거나, byte코딩을 할때면 더이상 기존 방법으로 하긴 매우 버겁죠.

서버사이드(server-side) 코드를 더욱이 디버깅하기 힘들죠.

 

그런 불편한 디버깅을 local 코딩처럼 디버깅 해주는 방법이 있습니다.

 

 

1. node-loader 설치

ESM 로더를 개발모드에서 활성화 합니다.

$ yarn add @vavite/node-loader --dev

 

 

 

 

2. 개발 모드에서만 노드로더 활성화

vite.config.js 로 이동해서 아래와 같이 수정하거나 추가합니다.

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { nodeLoaderPlugin } from '@vavite/node-loader/plugin';

/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
    let plugins = [sveltekit()];
    if (mode === 'development') {
        plugins = [nodeLoaderPlugin(), ...plugins];
    }

    return { 
        plugins
    };
});

 

 

 

 

3. VSCode IDE 구성 추가

pnpm이 설치가 안되어 있다면 설치해주세요. ($brew install pnpm)

 

저의 경우 기존에는 "$npm run dev" 명령어로 항상 개발자 모드를 실행하고 있었습니다.

package.json을 보면 스크립트가 dev로 하게 되면 "vite dev"까지 실행되는걸 알 수 있습니다.

 

vscode에서 workspace 폴더의 최상단에 있는 

.vscode/launch.json 파일을 아래와 같이 수정해줍니다. (파일이 없다면 생성해주세요)

{
    "version": "0.2.0",
    "configurations": [
        {
            "cwd" : "${workspaceFolder}/myfolder",
            "command": "pnpm vavite-loader vite dev --port 5173",
            "name": "Launch SvelteKit server",
            "request": "launch",
            "type": "node-terminal"
        }
    ]
}

cwd부분을 자신이 사용하는 폴더경로로 해줍니다.

command부분은 pnpm명령어를 사용해서 vavite-loader도 실행하고,

vite dev --port 5173 명령어로 사용해서 svelte를 개발자 모드로 실행합니다.

 

 

 

4. VSCode의 디버깅 패널(Run and Debug)로 갑니다.

위에 초록색 버튼을 누르던지, F5를 눌러서 디버깅을 시장합니다.

 

그러면 launch.json에 적힌 configuration 진행됩니다.

디버거가 잘 붙고 vite로 빌드된 svelte가 localhost에 뜬걸 확인 할 수 있습니다.

 

 

5. 실제 디버깅

소스코드 왼쪽에, 숫자 옆에 빈공간을 마우스로 클릭해보면

빨간 점이 생깁니다. 

이 빨간점을 브레이킹 포인트라고 부릅니다. 디버깅을 진행중이다가 멈추는 구간을 말하는거죠.

 

디버깅중이였고, 저부분이 실행되면 

브레이킹 포인트가 있는 소스코드 라인이 노란색으로 표시되면서, 

변수의 데이터들을 관찰 할 수 있습니다.

 

 

 

 

 

 

이걸로 삽질 적게 하시고

즐 코딩하세요~

 

 

 

 

 

-==========================

추가.

debug를 실행하게 되면 process.env 에 데이터가 안들어있는데

이는 env file 경로를 설정해주거나, 커맨드를 입력해줘야한다.

그래서 아래처럼 configuration안에 envFile 경로를 설정해줘야한다.

{
    "type":"node",
    "request": "launch",
    "name":"Debug Start",
    "skipFiles": [
        "<node_internals>/**"
    ],
    "program": "${workspaceFolder}/Bot/index.js",
    "runtimeExecutable": "/usr/local/bin/node",
    "envFile": "${workspaceFolder}/Bot/.env"
}

 

 

==============================

또 추가.

아래 configuration을 이용하면, 구동중인 스벨트를 선택해서 디버깅을 붙일 수 있음

{
    "name": "Attach to Process",
    "type": "node",
    "request": "attach",
    "processId": "${command:PickProcess}"
}