VSCode에서 JavaScript 및 TypeScript 파일 디버깅

VSCode에는 훌륭한 디버깅 기능이 있습니다. 에서 Chrome 및 VSCode를 사용하여 React 앱을 디버그하는 것이 얼마나 쉬운지 이미 설명했습니다. 이번에는 단일 JavaScript 또는 TypeScript 파일 디버깅에 중점을 둘 것입니다.

JS 파일을 디버깅하는 일반적인 방법은 JavaScript 디버그 터미널을 사용하는 것입니다. 이러한 터미널은 메뉴를 통해 열 수 있습니다.

View → Command Palette → JavaScript Debug Terminal

node <file>를 실행하여 직접 또는 npm run <script>를 실행하여 패키지 스크립트를 통해 JS 파일에 중단점을 설정하고 터미널에서 디버그하려는 파일을 실행하기만 하면 됩니다. 디버그 터미널은 시작 Node.js 프로세스에 자동으로 연결되고 중단점에서 중지됩니다. ts-node <file> 를 사용하는 경우 TypeScript에서도 작동합니다.

디버그 구성

그러나 JavaScript 디버그 터미널을 열고 클릭 한 번으로 현재 열려 있는 JS 또는 TS 파일을 자동으로 실행하는 디버그 구성을 생성하여 이 프로세스를 자동화할 수 있습니다. 먼저 작업 공간에 .vscode 폴더를 생성한 다음 그 안에 .launch.json 파일을 생성해야 합니다. 이 파일은 프로젝트를 실행하거나 디버그하기 위한 옵션 목록을 정의합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "name": "Debug Current JS File (node)",
      "request": "launch",
      "command": "node -- ${fileBasenameNoExtension}",
      "cwd": "${fileDirname}"
    },
    {
      "type": "node-terminal",
      "name": "Debug Current TS File (ts-node)",
      "request": "launch",
      "command": "ts-node -- ${fileBasenameNoExtension}",
      "cwd": "${fileDirname}"
    },
    {
      "type": "node-terminal",
      "name": "Debug Current Test File (npm run test)",
      "request": "launch",
      "command": "npm run test -- ${fileBasenameNoExtension}",
      "cwd": "${fileDirname}"
    }
  ]
}

구성의 구조를 간략하게 살펴보겠습니다.

type : 이 경우 JavaScript 디버그 터미널을 통해 Node.js 앱을 디버그하기 위한 구성 유형node-terminal입니다.

name : 실행 및 디버그 섹션 내 드롭다운 메뉴의 구성 설명입니다.

request : launch를 통해 새 디버그 세션을 시작하거나 attach를 통해 이미 실행 중인 프로세스에 연결합니다.

command : 새 디버그 세션을 시작할 때 실행할 터미널의 명령

cwd : 현재 작업 디렉토리, 즉 명령이 실행되는 폴더

구성 간의 주요 차이점은 디버그 세션을 시작하기 위해 실행하는 명령입니다. JavaScript로 작업하는 경우 간단히 실행할 수 있습니다 node . 반면 TypeScript로 작업하는 경우 대신 ts-node를 사용해야 합니다. 또한 package.json 에서 미리 정의된 NPM 스크립트를 실행하는 것이 유용한 경우가 있습니다. Jest, Mocha, Karma 등과 같은 테스트 라이브러리에서 실행해야 하는 테스트 사례를 디버깅하는 데 특히 유용합니다. 이 경우 npm run test 스크립트를 실행할 수 있습니다.

변수

변수 ${fileBasenameNoExtension} 및 ${fileDirname}는 자리 표시자이며 시작 시 대체됩니다. 다음과 같은 미리 정의된 변수가 지원됩니다.

${userHome} - the path of the user's home folder
${workspaceFolder} - the path of the folder opened in VS Code
${workspaceFolderBasename} - the name of the folder opened in VS Code without any slashes (/)
${file} - the current opened file
${fileWorkspaceFolder} - the current opened file's workspace folder
${relativeFile} - the current opened file relative to workspaceFolder
${relativeFileDirname} - the current opened file's dirname relative to workspaceFolder
${fileBasename} - the current opened file's basename
${fileBasenameNoExtension} - the current opened file's basename with no file extension
${fileDirname} - the current opened file's dirname
${fileExtname} - the current opened file's extension
${cwd} - the task runner's current working directory upon the startup of VS Code
${lineNumber} - the current selected line number in the active file
${selectedText} - the current selected text in the active file
${execPath} - the path to the running VS Code executable
${defaultBuildTask} - the name of the default build task
${pathSeparator} - the character used by the operating system to separate components in file paths

전체 변수 참조는 VSCode documentation에서 사용할 수 있습니다.

실행 및 디버그

마지막으로 시도해 보겠습니다. 왼쪽 사이드바에서 실행 및 디버그 섹션을 열고 디버그하려는 파일에 따라 방금 생성한 구성 중 하나를 선택합니다. Node.js에서 샘플 서버 스크립트를 빠르게 가져왔습니다. 그런 다음 중단점을 설정하고 상단의 실행 아이콘을 클릭하여 디버그 세션을 시작합니다.