[vscode] vscode javascript 디버깅 설정

 

 

---

개요

• Visual Studio Code의 주요 기능 중 하나는 뛰어난 디버깅을 지원하고 있다.
• Node.js 런타임 에 대한 디버깅 지원이 내장되어 있으며 JavaScript, TypeScript 또는 JavaScript로 트랜스파일되는 기타 언어를 디버깅도 가능하다. 이러한 내장 디버거를 활용하면 편집, 컴파일 및 디버그 루프를 가속화하는 데 도움이 된다.
• 이번 포스팅에서는 JavaScript 디버깅 설정 방법과 node.js환경과 브라우저환경에서 디버깅 하는 방법을 정리해보았다.

 

 

Visual Studio Code 디버깅 지원 기능 확인

Visual Studio Code의 주요 기능 중 하나는 뛰어난 디버깅 지원입니다. VS Code에 내장된 디버거는 편집, 컴파일 및 디버그 루프를 가속화하는 데 도움이 됩니다.

https://code.visualstudio.com/docs/editor/debugging

launch.json 설정하기

기존 구성에 새 구성을 추가하려면 launch.json다음 기술 중 하나를 사용하십시오.

• 커서가 구성 배열 내부에 있는 경우 IntelliSense를 사용하십시오.
• 배열 시작 시 조각 IntelliSense를 호출하려면 구성 추가 단추를 누르십시오 .
• 실행 메뉴에서 구성 추가 옵션을 선택합니다 .

 

 

launch.json 설정파일 예

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

 

 

728x90

 

launch.json 속성 정리

필수요소

• type : 실행구성에 사용할 디버거 유형(node, php, python..등)
• request : 실행구성의 요청유형 현재는 'launch', 'attach` 입니다.
• name : 디버그 드롭다운에 나타나는 디버그 런치 이름

기타 속성들

• program : 디버거를 시작할 때 실행할 실행 파일 또는 파일
• args: 디버깅 할 프로그램에 전달된 인수
• env: 환경 변수
• cwd: 의존성 및 기타 파일을 찾기위한 현재 작업 디렉토리
• port: 실행중인 프로세스에 연결할 때의 포트
• stopOnEntry: 프로그램이 시작되면 즉시 중단
• console: 어떤 종류를 콘솔을 사용할지 지정. 예를 들어 internalConsole, integratedTerminal, externalTerminal.

 

launch.json 내장 변수

vscode는 문자열 내부의 변수 대체를 지원 launch.json하며 다음과 같이 미리 정의 된 변수가 있다.

• ${workspaceFolder} : vscode에서 연 폴더의 경로
• ${workspaceFolderBasename} : vscode에서 슬래시없이 열리는 폴더 이름 (/)
• ${file} : 현재 열려있는 파일
• ${relativeFile} : workspaceFolder 에서 현재 열린 파일
• ${fileBasename} : 현재 열려있는 파일의 기본 이름
• ${fileBasenameNoExtension} : 파일 확장명이 없는 현재 열린 파일의 기본 이름
• ${fileDirname} : 현재 열려있는 파일의 디렉토리 이름
• ${fileExtname} : 현재 열려있는 파일의 확장자
• ${cwd} : 시작시 태스크 러너의 현재 작업 디렉토리
• ${lineNumber} : 활성 파일에서 현재 선택된 행 번호

 

실행 환경별 디버깅 방법

VS Code에서 Node.js 디버깅

VS Code에서 Node.js 프로그램을 디버그할 수 있는 몇 가지 방법이 있습니다.

• VS Code의 통합 터미널에서 실행하는 디버그 프로세스에 자동 연결을 사용합니다 .
• 통합 터미널을 사용하는 것과 유사하게 JavaScript 디버그 터미널을 사용합니다 .
• 시작 구성을 사용하여 프로그램을 시작하거나 VS Code 외부에서 시작된 프로세스에 연결합니다 .

https://code.visualstudio.com/docs/nodejs/nodejs-debugging

Debug Node.js Apps using Visual Studio Code

 

 

VS Code의 브라우저 디버깅

Visual Studio Code에는 Edge 및 Chrome용 기본 제공 디버거가 포함되어 있습니다. 시작하는 방법에는 몇 가지가 있습니다.

• Open Link 명령을 사용하여 URL을 디버깅합니다.
• JavaScript 디버그 터미널 에서 링크를 클릭합니다 .
• 앱에서 브라우저를 시작하려면 시작 구성을 사용하세요 .

또한 React , Angular 및 Vue 를 시작하는 데 필요한 자세한 연습 과 기타 디버깅 방법 도 있습니다 .

 

https://code.visualstudio.com/docs/nodejs/browser-debugging

Debug Browser Apps using Visual Studio Code