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

디버거 확장 

VS 코드에는 Node.js 런타임에 대한 디버깅 지원 기능이 내장되어있어 JavaScript, TypeScript 및 JavaScript로 변환 된 다른 언어를 디버깅 할 수 있습니다.

다른 언어 및 런타임 (PHP, Ruby, Go, C #, Python, C ++, PowerShell 및 기타 여러 언어 포함)을 디버깅하려면 VS Code Marketplace에서 Debuggers 확장을 찾거나 최상위 디버그 메뉴의 Install Additional Debuggers ...를 클릭하십시오. .

디버깅 시작 

다음 문서는 기본 제공 Node.js 디버거를 기반으로 하지만 대부분의 개념과 기능은 다른 디버거에도 적용됩니다.

디버깅에 대해 읽으려면 먼저 샘플 Node.js 응용 프로그램을 만드는 것이 좋습니다. Node.js 연습을 따라 Node.js를 설치하고 간단한 "Hello World"JavaScript 애플리케이션 (app.js)을 만들 수 있습니다. 간단한 응용 프로그램을 모두 설정하면 이 페이지에서 VS 코드 디버깅 기능을 사용할 수 있습니다.

디버그 보기 

디버그 보기를 표시하려면 VS 코드 측면의 활동 표시 줄에서 디버그 아이콘을 클릭하십시오. 단축키 Ctrl + Shift + D를 사용할 수도 있습니다.

디버그 보기는 디버깅과 관련된 모든 정보를 표시하며 디버깅 명령과 구성 설정이 있는 최상위 막대를 가집니다.

디버그 메뉴 

최상위 디버그 메뉴에는 가장 일반적인 디버그 명령이 있습니다.

구성 실행 

VS 코드에서 간단한 응용 프로그램을 디버깅 하려면 F5 키를 누르면 VS 코드가 현재 활성 파일을 디버깅합니다.

그러나 대부분의 디버깅 시나리오에서 시작 구성 파일을 만드는 것은 디버깅 설치 세부 정보를 구성하고 저장할 수 있으므로 유용합니다.

VS 코드는 작업 영역 (프로젝트 루트 폴더)의 .vscode 폴더 또는 사용자 설정 또는 작업 영역 설정에있는 launch.json 파일의 디버깅 구성 정보를 유지합니다.

launch.json 파일을 만들려면 VS 코드 (파일> 폴더 열기)에서 프로젝트 폴더를 연 다음 디버그보기 상단 표시 줄에서 톱니 바퀴 아이콘 구성 아이콘을 클릭합니다.

VS 코드는 디버그 환경을 자동으로 감지하려고 시도하지만 실패 할 경우 디버그 환경을 수동으로 선택해야 합니다.

Node.js 디버깅을 위해 생성 된 실행 구성은 다음과 같습니다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}"
        }
    ]
}

파일 탐색기 보기 (Ctrl + Shift + E)로 돌아 가면 VS 코드에서 .vscode 폴더가 만들어지고 launch.json 파일이 작업 영역에 추가 된 것을 볼 수 있습니다.

** VS 코드에서 폴더를 열지 않아도 간단한 애플리케이션을 디버깅 할 수 있지만 실행 구성을 관리하고 고급 디버깅을 설정할 수는 없습니다. 폴더가 열려 있지 않으면 VS 코드 상태 표시 줄이 자주색입니다.

시작 구성에서 사용할 수 있는 특성은 디버거마다 다릅니다. IntelliSense 제안 (Ctrl + Space)을 사용하여 특정 디버거에 대한 특성을 찾을 수 있습니다. 또한 모든 속성에 대해 호버 (hover) 도움말을 사용할 수 있습니다.

한 디버거에서 사용할 수 있는 특성이 다른 디버거에서도 자동으로 작동한다고 가정하지 마십시오. 시작 구성에서 녹색 squiggles가 보이면 마우스를 올려 놓아 문제가 무엇인지 파악하고 디버그 세션을 시작하기 전에 문제를 해결하십시오.

VS 코드 디버거는 일반적으로 프로그램을 디버그 모드로 시작하거나 이미 실행중인 프로그램에 디버그 모드로 연결하는 것을 지원합니다. 요청 (첨부 또는 실행)에 따라 다른 속성이 필요하며 VS 코드의 launch.json 유효성 검사 및 제안이 도움이 됩니다.

자동으로 생성 된 모든 값을 검토하고 프로젝트 및 디버깅 환경에 적합한 지 확인하십시오.

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

• 커서가 구성 배열 안에 있으면 IntelliSense를 사용하십시오.
  
• 구성 시작 단추를 눌러 배열의 시작 부분에서 코드 조각 IntelliSense를 호출합니다.
  
• 디버그 드롭 다운에서 구성 추가 ... 옵션을 선택하십시오.
  

또한 VS 코드는 여러 구성을 동시에 시작하기위한 복합 실행 구성을 지원합니다.

디버그 세션을 시작하려면 디버그 보기의 구성 드롭다운을 사용하여 Launch Program이라는 구성을 먼저 선택하십시오. 실행 구성 설정을 마치면 F5를 사용하여 디버그 세션을 시작하십시오.

또는 명령 팔레트 (Ctrl + Shift + P)를 통해 구성을 실행하고 디버그 : 디버그 선택 및 시작 또는 '디버그'를 입력하고 디버깅 할 구성을 선택할 수 있습니다.

디버깅 세션이 시작되면 DEBUG CONSOLE 패널이 표시되고 디버깅 출력이 표시되고 상태 표시 줄이 주황색으로 바뀝니다.

또한 활성 상태의 디버그 구성을 보여주는 상태 표시 줄에 디버그 상태가 나타납니다. 디버그 상태를 클릭하면 사용자는 활성 실행 구성을 변경 한 다음 디버그 보기를 열지 않아도 디버깅을 시작할 수 있습니다.

디버그 작업 

디버그 세션이 시작되면 디버그 도구 모음이 편집기 상단에 나타납니다.

• 계속 / 일시 중지 F5
  
• 스텝 오버 F10
  
• Step Into F11
  
• Step Out Shift+F11
  
• 다시 시작 Ctrl + Shift + F5
  
• 중지 Shift + F5
  

실행 모드 

프로그램을 디버깅하는 것 외에도 VS 코드는 프로그램 실행을 지원합니다. 디버그 : 디버깅하지 않고 시작 액션은 Ctrl + F5를 사용하여 트리거되고 현재 선택된 실행 구성을 사용합니다. 실행 구성 속성의 대부분은 '실행'모드에서 지원됩니다. VS 코드는 프로그램 실행 중에 디버그 세션을 유지하고 Stop 버튼을 누르면 프로그램이 종료됩니다.

** 실행 동작은 항상 사용할 수 있지만 모든 디버거 확장이 '실행'을 지원하는 것은 아닙니다. 이 경우 '실행'은 '디버그'와 동일합니다.

Breakpoints(중단 점) 

중단 점은 편집기 여백을 클릭하여 전환 할 수 있습니다. 디버그 뷰의 BREAKPOINTS 섹션에서 더 세밀한 브레이크 포인트 컨트롤 (활성화 / 비활성화 / 다시 적용)을 수행 할 수 있습니다.

• 편집기 여백에 있는 중단 점은 일반적으로 빨간색 채워진 원으로 표시됩니다.
  
• 사용 중지 된 중단 점에는 채워진 회색 원이 있습니다.
  
• 디버깅 세션이 시작되면 디버거에 등록 할 수 없는 중단 점이 회색 중공으로 바뀝니다. 라이브 편집 지원이 없는 디버그 세션이 실행되는 동안 소스가 편집되는 경우에도 마찬가지입니다.
  

Reaply All Breakpoints 명령은 모든 중단 점을 원래 위치로 다시 설정합니다. 이것은 디버그 환경이 아직 실행되지 않은 소스 코드에서 "lazy"이고 "misplaces"중단 점인 경우 유용합니다.

로그 포인트 

Logpoint는 디버거로 "중단"하지 않고 대신 콘솔에 메시지를 기록하는 중단 점의 변형입니다. 로그 포인트는 중지 할 수 없는 프로덕션 서버를 디버깅 하는 동안 로깅을 주입하는 데 특히 유용합니다.

Logpoint는 "다이아몬드 모양"아이콘으로 표시됩니다. 로그 메시지는 일반 텍스트이지만 중괄호 ( '{}')로 평가할 표현식을 포함 할 수 있습니다.

일반 중단 점처럼 Logpoint는 활성화 또는 비활성화 될 수 있으며 조건 및 / 또는 적중 횟수에 의해 제어 될 수도 있습니다.

** 로그 포인트는 현재 VS 코드의 내장 Node.js 디버거에서만 지원되지만 다른 디버그 확장 프로그램에서도 구현할 수 있습니다.

데이터 검사 

디버그 뷰의 VARIABLES 섹션에서 변수를 검사하거나 편집기에서 해당 소스로 마우스를 가져 가면 변수를 검사 할 수 있습니다. 변수 및 표현식 평가는 CALL STACK 섹션의 선택된 스택 프레임에 상대적입니다.

변수 값은 변수의 컨텍스트 메뉴에서 값 설정 작업을 사용하여 수정할 수 있습니다.

변수와 표현식은 디버그보기의 감시 (WATCH) 섹션에서 평가되고 감시 될 수 있습니다.