Visual Studio Code로 코드 디버깅

Visual Studio Code는 다양한 유형의 애플리케이션을 디버깅하는 강력한 기능을 제공합니다. VS Code는 JavaScript, TypeScript 및 Node.js 디버깅을 위한 내장 지원을 제공합니다. Visual Studio Marketplace에는 VS Code에 다른 언어 및 런타임에 대한 디버깅 지원을 추가하는 다양한 디버깅 확장 프로그램이 있습니다.

이 문서는 VS Code의 디버깅 기능과 VS Code에서 디버깅을 시작하는 방법을 설명합니다. 또한 VS Code에서 Copilot을 사용하여 디버깅 구성을 설정하고 디버깅 세션을 시작하는 과정을 가속화하는 방법을 배울 수 있습니다.

다음 동영상은 VS Code에서 디버깅을 시작하는 방법을 보여줍니다.

디버거 사용자 인터페이스

다음 다이어그램은 디버거 사용자 인터페이스의 주요 구성 요소를 보여줍니다.

1. 실행 및 디버그 보기: 실행, 디버깅 및 디버그 구성 설정 관리에 대한 모든 정보를 표시합니다.
2. 디버그 도구 모음: 가장 일반적인 디버깅 작업을 위한 버튼이 있습니다.
3. 디버그 콘솔: 디버거에서 실행되는 코드의 출력을 보고 상호 작용할 수 있습니다.
4. 디버그 사이드바: 디버그 세션 중에 호출 스택, 중단점, 변수 및 감시 변수와 상호 작용할 수 있습니다.
5. 실행 메뉴: 가장 일반적인 실행 및 디버그 명령이 포함되어 있습니다.

디버깅 시작하기 전에

1. 언어 또는 런타임에 대한 Visual Studio Marketplace에서 디버깅 확장을 설치하십시오.

   VS Code는 JavaScript, TypeScript 및 Node.js 디버깅에 대한 내장 지원을 제공합니다.

2. 프로젝트에 대한 디버깅 구성을 정의합니다.

   간단한 애플리케이션의 경우 VS Code는 현재 활성 파일을 실행하고 디버깅하려고 시도합니다. 더 복잡한 애플리케이션 또는 디버깅 시나리오의 경우 디버거 구성을 지정하기 위해 launch.json 파일을 만들어야 합니다. 디버그 구성 작성에 대한 자세한 정보를 얻으십시오.

   팁

   VS Code의 Copilot은 launch.json 파일을 생성하는 데 도움을 줄 수 있습니다. 자세한 내용은 AI를 사용하여 디버깅 구성을 생성하는 Copilot 사용을 참조하십시오.

3. 코드에 중단점을 설정합니다.

   중단점은 코드 줄에 설정하여 디버거가 해당 줄에 도달하면 실행을 일시 중지하도록 지시하는 표시입니다. 편집기에서 줄 번호 옆 여백을 클릭하여 중단점을 설정할 수 있습니다.

   중단점에 대한 자세한 내용은 중단점 작업을 참조하십시오.

디버깅 세션 시작

VS Code에서 디버깅 세션을 시작하려면 다음 단계를 수행하십시오.

1. 디버깅하려는 코드가 포함된 파일을 엽니다.

2. F5 키를 누르거나 (workbench.view.debug) 실행 및 디버그 보기에서 실행 및 디버그를 선택하여 디버깅 세션을 시작합니다.

   

   실행 중인 프로세스에 연결하는 것과 같이 더 복잡한 디버깅 시나리오의 경우 디버거 구성을 지정하기 위해 launch.json 파일을 만들어야 합니다. 디버그 구성에 대한 자세한 정보를 얻으십시오.

3. 사용하려는 디버거를 사용 가능한 디버거 목록에서 선택합니다.

   VS Code는 현재 활성 파일을 실행하고 디버깅하려고 시도합니다. Node.js의 경우 VS Code는 package.json 파일에서 start 스크립트를 확인하여 애플리케이션의 진입점을 결정합니다.

4. 디버깅 세션이 시작되면 디버그 콘솔 패널이 표시되고 디버깅 출력이 표시되며 상태 표시줄의 색상이 변경됩니다(기본 색상 테마의 경우 주황색).

   

5. 상태 표시줄의 디버그 상태는 활성 디버그 구성을 표시합니다. 디버그 상태를 선택하면 활성 실행 구성이 변경되고 실행 및 디버그 보기를 열지 않고도 디버깅을 시작할 수 있습니다.

   

디버깅 작업

디버그 세션이 시작되면 창 상단에 디버그 도구 모음이 나타납니다. 이 도구 모음에는 코드 실행, 실행 일시 중지, 디버그 세션 중지와 같은 디버그 세션 흐름을 제어하는 작업이 포함되어 있습니다.

다음 표는 디버그 도구 모음에서 사용 가능한 작업을 설명합니다.

디버깅 세션에 여러 대상(예: 클라이언트 및 서버)이 포함된 경우 디버그 도구 모음에 세션 목록이 표시되고 세션 간에 전환할 수 있습니다.

중단점

중단점은 코드의 특정 지점에서 프로그램 실행을 일시 중지하여 해당 지점에서 애플리케이션 상태를 검사할 수 있도록 하는 특수 표시입니다. VS Code는 여러 유형의 중단점을 지원합니다.

중단점 설정

중단점을 설정하거나 해제하려면 편집기 여백을 클릭하거나 현재 줄에서 F9를 사용하십시오.

• 편집기 여백의 중단점은 일반적으로 빨간색 채워진 원으로 표시됩니다.
• 비활성화된 중단점은 회색 채워진 원으로 표시됩니다.
• 디버깅 세션이 시작되면 디버거에 등록할 수 없는 중단점은 회색 빈 원으로 변경됩니다. 소스가 라이브 편집 지원 없이 실행 중인 디버그 세션 중에 편집되는 경우에도 동일한 일이 발생할 수 있습니다.

선택적으로, debug.showBreakpointsInOverviewRuler 설정을 활성화하여 편집기의 개요 눈금자에 중단점을 표시할 수 있습니다.

중단점을 더 많이 제어하려면 실행 및 디버그 보기의 중단점 섹션을 사용하십시오. 이 섹션은 코드의 모든 중단점을 나열하고 추가 작업을 통해 관리할 수 있도록 합니다.

중단점 유형

조건부 중단점

VS Code의 강력한 디버깅 기능은 식, 히트 수 또는 둘 다의 조합을 기반으로 조건을 설정하는 기능입니다.

• 식 조건: 식이 true로 평가될 때마다 중단점이 히트됩니다.
• 히트 수: 히트 수는 중단점이 실행을 중단하기 전에 히트해야 하는 횟수를 제어합니다. 히트 수가 존중되는지 여부와 식의 정확한 구문은 디버거 확장에 따라 다를 수 있습니다.
• 중단점 대기: 다른 중단점이 히트될 때 중단점이 활성화됩니다 (트리거 중단점).

조건부 중단점을 추가하려면

1. 조건부 중단점 만들기

   • 편집기 여백에서 마우스 오른쪽 버튼을 클릭하고 조건부 중단점 추가를 선택합니다.
   • 명령 팔레트 (⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 조건부 중단점 추가 명령을 사용합니다.

2. 설정하려는 조건 유형(식, 히트 수 또는 중단점 대기)을 선택합니다.

   

기존 중단점에 조건을 추가하려면

1. 기존 중단점 편집

   • 편집기 여백의 중단점에서 마우스 오른쪽 버튼을 클릭하고 중단점 편집을 선택합니다.
   • 실행 및 디버그 보기의 중단점 섹션에서 기존 중단점 옆에 있는 연필 아이콘을 선택합니다.

2. 조건(식, 히트 수 또는 중단점 대기)을 편집합니다.

디버거가 조건부 중단점을 지원하지 않는 경우 조건부 중단점 추가 및 조건 편집 작업은 사용할 수 없습니다.

트리거된 중단점

트리거 중단점은 다른 중단점이 히트된 후에 활성화되는 조건부 중단점의 유형입니다. 특정 사전 조건 후에만 발생하는 코드 오류 사례를 진단할 때 유용할 수 있습니다.

트리거된 중단점은 글리프 여백을 마우스 오른쪽 버튼으로 클릭하고 트리거된 중단점 추가를 선택한 다음 어떤 다른 중단점이 중단점을 활성화하는지 선택하여 설정할 수 있습니다.

인라인 중단점

인라인 중단점은 실행이 인라인 중단점과 관련된 열에 도달할 때만 히트됩니다. 이는 한 줄에 여러 문장이 포함된 난독화된 코드를 디버깅할 때 유용합니다.

⇧F9 (Windows, Linux Shift+F9) 또는 디버그 세션 중 컨텍스트 메뉴를 사용하여 인라인 중단점을 설정할 수 있습니다. 인라인 중단점은 편집기 내에 표시됩니다.

인라인 중단점에도 조건을 지정할 수 있습니다. 편집기의 왼쪽 여백에서 컨텍스트 메뉴를 통해 한 줄에 여러 중단점을 편집할 수 있습니다.

함수 중단점

소스 코드에 직접 중단점을 배치하는 대신 함수 이름을 지정하여 중단점을 생성하는 디버거를 지원할 수 있습니다. 이는 소스를 사용할 수 없지만 함수 이름은 알려진 상황에서 유용합니다.

함수 중단점을 만들려면 중단점 섹션 헤더의 + 버튼을 선택하고 함수 이름을 입력합니다. 함수 중단점은 중단점 섹션에 빨간색 삼각형으로 표시됩니다.

데이터 중단점

디버거가 데이터 중단점을 지원하는 경우 변수 보기의 컨텍스트 메뉴에서 설정할 수 있습니다. 값 변경/읽기/액세스 시 중단 명령은 기본 변수의 값이 변경/읽기/액세스될 때 히트되는 데이터 중단점을 추가합니다. 데이터 중단점은 중단점 섹션에 빨간색 육각형으로 표시됩니다.

로그 포인트

로그포인트는 디버거를 중단시키지 않고 디버그 콘솔에 메시지를 기록하는 중단점의 변형입니다. 로그포인트는 코드에 로깅 문을 추가하거나 제거할 필요 없이 시간을 절약하는 데 도움이 될 수 있습니다.

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

로그포인트를 추가하려면 편집기 왼쪽 여백에서 마우스 오른쪽 버튼을 클릭하고 로그포인트 추가를 선택하거나, 명령 팔레트 (⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 디버그: 로그포인트 추가... 명령을 사용합니다. 또한 편집기 여백에서 마우스 가운데 버튼을 눌러 로그포인트를 토글하도록 debug.gutterMiddleClickAction 설정을 구성할 수도 있습니다.

일반 중단점과 마찬가지로 로그포인트는 활성화하거나 비활성화할 수 있으며 조건 및/또는 히트 수로 제어할 수도 있습니다.

데이터 검사

실행 및 디버그 보기

디버깅 세션 중에 실행 및 디버그 보기의 변수 섹션 또는 편집기에서 해당 소스 위로 마우스를 가져가 변수와 식을 검사할 수 있습니다. 변수 값과 식 평가는 호출 스택 섹션에서 선택한 스택 프레임에 상대적입니다.

디버깅 세션 중에 변수 값을 변경하려면 변수 섹션에서 변수를 마우스 오른쪽 버튼으로 클릭하고 값 설정 (Enter (Windows, Linux F2))을 선택합니다.

또한 값 복사 작업을 사용하여 변수 값을 복사하거나 식으로 복사 작업을 사용하여 변수에 액세스하는 식을 복사할 수 있습니다. 그런 다음 이 식을 감시 섹션에서 사용할 수 있습니다.

변수 및 식은 실행 및 디버그 보기의 감시 섹션에서도 평가하고 감시할 수 있습니다.

이름이나 값으로 변수를 필터링하려면 변수 섹션에 초점이 맞춰진 상태에서 ⌥⌘F (Windows, Linux Ctrl+Alt+F) 키보드 단축키를 사용하고 검색어를 입력합니다.

디버그 콘솔 REPL

디버그 콘솔 REPL (읽기-평가-인쇄 루프) 기능을 사용하여 식을 평가할 수 있습니다. 디버그 콘솔을 열려면 디버그 패널 상단의 디버그 콘솔 작업을 사용하거나 보기: 디버그 콘솔 명령 (⇧⌘Y (Windows, Linux Ctrl+Shift+Y))을 사용합니다.

식은 Enter를 누르면 평가되며 디버그 콘솔 REPL은 입력하는 동안 제안을 표시합니다. 여러 줄을 입력해야 하는 경우 줄 사이에 Shift+Enter를 사용하고 모든 줄을 Enter로 평가용으로 보냅니다.

디버그 콘솔 입력은 활성 편집기의 모드를 사용하므로 디버그 콘솔 입력은 구문 색상, 들여쓰기, 따옴표 자동 닫기 및 기타 언어 기능을 지원합니다.

다중 대상 디버깅

여러 프로세스(예: 클라이언트 및 서버)가 관련된 복잡한 시나리오의 경우 VS Code는 다중 대상 디버깅을 지원합니다. 첫 번째 디버그 세션을 시작한 후 다른 디버그 세션을 시작할 수 있습니다. 두 번째 세션이 실행되면 VS Code UI는 다중 대상 모드로 전환됩니다.

• 개별 세션은 이제 호출 스택 보기에서 최상위 요소로 표시됩니다.

  

• 디버그 도구 모음은 현재 활성 세션을 표시하고(다른 모든 세션은 드롭다운 메뉴에서 사용 가능) 표시합니다.

  

• 디버그 작업(예: 디버그 도구 모음의 모든 작업)은 활성 세션에 대해 수행됩니다. 활성 세션은 디버그 도구 모음의 드롭다운 메뉴를 사용하거나 호출 스택 보기에서 다른 요소를 선택하여 변경할 수 있습니다.

원격 디버깅

VS Code는 모든 언어에 대해 내장 원격 디버깅을 지원하지 않습니다. 원격 디버깅은 사용 중인 디버그 확장의 기능이며 지원 및 자세한 내용은 Marketplace에서 확장 프로그램 페이지를 참조해야 합니다.

그러나 한 가지 예외가 있습니다. VS Code에 포함된 Node.js 디버거는 원격 디버깅을 지원합니다. 자세한 내용은 Node.js 디버깅을 참조하십시오.

디버거 확장

VS Code는 Node.js 런타임에 대한 내장 디버깅 지원을 제공하며 JavaScript, TypeScript 또는 JavaScript로 변환되는 기타 언어를 디버깅할 수 있습니다.

다른 언어 및 런타임(예: PHP, Ruby, Go, C#, Python, C++, PowerShell 및 다수)의 디버깅을 위해 Visual Studio Marketplace에서 디버거 확장 프로그램을 검색하거나 최상위 실행 메뉴에서 추가 디버거 설치를 선택하십시오.

다음은 디버깅 지원이 포함된 몇 가지 인기 있는 확장 프로그램입니다.

다음 단계

VS Code의 Node.js 디버깅 지원에 대해 알아보려면 다음을 참조하십시오.

• Node.js - VS Code에 포함된 Node.js 디버거를 설명합니다.
• TypeScript - Node.js 디버거는 TypeScript 디버깅도 지원합니다.

디버깅 기본 사항에 대한 튜토리얼을 보려면 이 동영상을 확인하십시오.

• VS Code에서 디버깅 시작하기 - VS Code에서의 디버깅에 대해 알아봅니다.

VS Code에서 Copilot 및 AI 지원 디버깅에 대해 자세히 알아보려면

• Copilot으로 디버깅 및 문제 해결
• 디버깅 및 문제 해결을 위한 Copilot 치트 시트

VS Code 확장을 통한 다른 프로그래밍 언어의 디버깅 지원에 대해 자세히 알아보려면

• C++
• Python
• Java

VS Code의 작업 실행 지원에 대해 자세히 알아보려면 다음을 참조하십시오.

• 작업 - Gulp, Grunt 및 Jake를 사용하여 작업을 실행하는 방법과 오류 및 경고를 표시하는 방법을 설명합니다.

자신만의 디버거 확장을 작성하려면 다음을 방문하십시오.

• 디버거 확장 - VS Code 디버그 확장을 만드는 데 필요한 단계를 설명하기 위해 모의 샘플을 사용합니다.

자주 묻는 질문

지원되는 디버깅 시나리오는 무엇입니까?

Node.js 기반 애플리케이션 디버깅은 VS Code에서 Linux, macOS 및 Windows에서 바로 사용할 수 있습니다. Marketplace에서 사용 가능한 VS Code 확장 프로그램을 통해 다른 많은 시나리오가 지원됩니다.