Visual Studio Code 자체에서 Node.js 애플리케이션을 디버깅하는 것은 가능하고 간단합니다. VS Code 에디터에는 Node.js 런타임을 대상으로 하는 모든 애플리케이션을 디버깅할 수 있는 디버거가 내장되어 있습니다. 즉, JavaScript 또는 이를 컴파일하는 다른 언어(예: TypeScript)를 디버깅할 수 있습니다.
이 문서에서는 VS Code에서 Node.js 애플리케이션을 디버깅하는 단계를 안내합니다. 디버그 세션을 시작하고, 중단점을 삽입하고, 외부 프로세스를 연결하고, 소스 맵을 사용하여 TypeScript 코드를 디버깅하는 방법을 배웁니다.
시작하기 위해 필요한 사항
시작하기 전에 로컬 컴퓨터에 Node.js와 VS Code를 모두 설치하세요. Node.js의 최신 버전은 Node.js 공식 웹사이트에서 다운로드할 수 있습니다. 마찬가지로 Visual Studio Code의 경우 VS Code 웹사이트에서 최신 버전을 다운로드하세요. Windows에서 VS Code를 설정하는 방법에 대한 지침은 설정 가이드를 참조하세요.
Node.js 프로젝트도 필요합니다. 간단한 Node.js 애플리케이션을 처음부터 새로 만들거나 기존 애플리케이션을 사용할 수 있습니다.
VS Code의 디버깅 프로세스
VS Code 에디터에서 디버그 세션을 시작하는 방법은 매우 간단합니다. VS Code로 파일을 열고 사이드바에서 실행 및 디버그 아이콘을 클릭합니다(또는 키보드에서 Ctrl + Shift + D를 누릅니다). 그런 다음 실행 및 디버그 버튼을 클릭하여 프로세스를 시작합니다.
기본적으로 Node.js는 프로젝트의 디버그 환경을 파악하려고 시도합니다. 그러나 자동 감지에 실패하면 올바른 환경을 선택하라는 메시지가 표시됩니다. 이 튜토리얼에서 해당 환경은 Node.js입니다.
환경을 선택하면 VS Code가 디버거를 활성화하고 프로세스에 연결합니다. 디버그 콘솔에서 출력을 확인할 수 있습니다. 상단의 디버그 도구 모음을 사용하여 코드를 반복하거나 실행을 일시 중지하거나 세션을 종료할 수 있습니다.
구성 파일을 생성하는 옵션도 있습니다. launch.json 파일을 사용하여 디버그 세부 정보를 구성하고 설정할 수 있습니다. 스크립트에 인수가 필요한 경우 launch.json 파일에 해당 인수를 제공하세요. 각 구성에 여러 옵션을 설정할 수 있습니다:
{
"version": "0.2.0",
"configurations": [
{ "type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js"
}
]
}
편집기 왼쪽에 다섯 개의 패널도 있습니다. 이 패널은 변수, 감시, 호출 스택, 로드된 스크립트, 중단점입니다:
구성 설정이 완료되면 구성 메뉴를 통해 프로그램을 선택하고 실행합니다.
외부 프로세스 연결
Node.js 디버깅 세션을 설정하는 또 다른 방법은 외부 프로세스를 연결하여 설정하는 것입니다. 다음 명령으로 프로그램을 시작합니다:
node --inspect index.js
프로그램이 실행되기 전에 첨부하려면 –inspect 뒤에 -brk 플래그를 삽입하세요.
다음으로 VS Code에서 프로세스 선택기를 엽니다. 여기에는 Node.js 환경에서 사용 가능한 모든 프로세스가 나열됩니다. 선택기를 열려면 Ctrl + Shift + P를 누르고 디버그를 찾습니다: Node.js에 연결 명령을 찾습니다.
명령을 클릭하고 올바른 옵션을 선택하여 디버그 프로세스를 시작합니다.
중단점 만들기
프로그램의 특정 지점에서 일시 중지하여 코드를 검사하려면 해당 지점에 중단점을 설정하세요. 코드의 거의 모든 위치에 중단점을 설정할 수 있습니다. 여기에는 변수 선언, 표현식 및 주석이 포함됩니다. 하지만 함수 선언에는 중단점을 설정할 수 없습니다.
중단점을 만드는 것은 매우 간단합니다. 줄 번호의 왼쪽으로 마우스를 이동하면 각 줄에 빨간색 원이 나타납니다. 코드에서 중단점을 삽입할 줄 번호를 식별합니다. 그런 다음 해당 줄을 클릭하여 중단점을 추가합니다:
중단점 창에서 프로젝트에서 활성화된 모든 중단점을 찾을 수 있습니다. 여기서 중단점을 관리, 편집 및 비활성화할 수 있습니다. 예외가 발생하거나 잡히지 않은 예외가 있는 경우 코드를 중단할 수도 있습니다. 이를 통해 프로세스가 종료되기 전에 문제를 검사할 수 있습니다.
중단점이 실제로 작동하는 모습을 살펴봅시다. 디버깅 세션을 시작하려면 실행 아이콘을 클릭합니다. 프로그램이 첫 번째 중단점에서 일시 중지되고 검사할 값을 산출합니다.
계속 아이콘을 클릭하거나 F5 키를 눌러 프로그램을 다음 중단점으로 이동할 수 있습니다. 이 과정은 프로그램 끝에 도달할 때까지 계속됩니다.
소스 맵으로 TypeScript 디버깅
TypeScript의 인기가 계속 높아짐에 따라 TypeScript로 작성된 Node.js 프로젝트의 양도 늘어날 수밖에 없습니다. 다행히도 VS Code로 TypeScript 기반 프로젝트를 디버깅할 수도 있습니다.
먼저 프로젝트의 루트 디렉터리에 tsconfig.json 파일을 생성하고(아직 생성되지 않은 경우) 소스 맵을 활성화합니다:
{ "compilerOptions": { "sourceMaps": true }}
다음으로, 실행 중인 프로세스를 첨부하고 TypeScript 파일에 중단점을 설정합니다. Visual Studio Code가 소스 맵을 찾아서 사용합니다.
소스 맵을 찾을 위치를 VS Code에 명시적으로 알려줄 수 있습니다. 이렇게 하려면 실행 구성 파일에 outFiles 속성을 추가하고 소스 맵의 정확한 위치를 가리키면 됩니다:
{
"version": "0.2.0",
"configurations": [ {
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js",
"outFiles": "${workspaceFolder}\\index.js",
}
]
}
ts-node를 사용하여 빌드 단계 없이 프로젝트를 실행하는 경우 위의 구성 대신 이 구성을 사용하십시오:
{
"version": "0.2.0",
"configurations": [ {
"type": "pwa-node",
"request": "launch",
"name": "Launch Server",
"skipFiles": [ "<node_internals>/**" ],
"runtimeArgs": [ "-r", "ts-node/register" ],
"args": [ "${workspaceFolder}/src/server.ts" ]
}]
}
프로그램 속성이 없으므로 런타임 args는 ts-node를 TypeScript 파일에 대한 핸들러로 등록합니다. args의 첫 번째 인수는 프로그램의 엔트리 파일입니다. 이제 디버깅 세션을 시작할 수 있습니다. 바닐라 자바스크립트 또는 프런트엔드 프레임워크로 개발하는 경우 브라우저에서 자바스크립트 코드를 디버깅할 수도 있습니다.
Visual Studio Code의 기타 기능
Visual Studio Code는 놀라운 기능으로 가득 찬 강력한 소스 코드 편집기입니다. VS Code에 내장된 디버거 도구에 대해 살펴봤습니다. 또한 이 도구를 사용하여 Node.js 애플리케이션을 디버깅하는 방법도 시연했습니다.
하지만 VS Code에는 다른 편리한 기능도 많이 있습니다. 그 중 일부는 익숙할 수도 있지만 일부는 완전히 새로운 기능일 수도 있습니다. 그렇다면 이러한 기능과 사용 방법에 대해 알아보는 것이 흥미로울 수 있습니다.