이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

Visual Studio Code 디버그 구성

복잡한 디버깅 시나리오 또는 애플리케이션의 경우, 디버거 구성을 지정하기 위해 launch.json 파일을 만들어야 합니다. 예를 들어, 애플리케이션 진입점 지정, 실행 중인 애플리케이션에 연결 또는 환경 변수 설정 등이 있습니다.

VS Code에서 디버깅에 대해 더 알아보려면 Visual Studio Code에서 디버깅을 참조하세요.

팁

VS Code의 Copilot은 프로젝트의 시작 구성을 만드는 데 도움을 줄 수 있습니다. Copilot으로 시작 구성 생성에 대한 자세한 정보를 얻으세요.

시작 구성

간단한 애플리케이션 또는 디버깅 시나리오의 경우, 특정 디버깅 구성 없이 프로그램을 실행하고 디버그할 수 있습니다. F5 키를 사용하면 VS Code가 현재 활성 파일을 실행하려고 시도합니다.

그러나 대부분의 디버깅 시나리오에서는 디버깅 구성(시작 구성)을 만들어야 합니다. 예를 들어, 애플리케이션 진입점 지정, 실행 중인 애플리케이션에 연결 또는 환경 변수 설정 등이 있습니다. 시작 구성 파일을 만드는 것은 디버깅 설정 세부 정보를 프로젝트와 함께 구성하고 저장할 수 있기 때문에 유익합니다.

VS Code는 디버깅 구성 정보를 워크스페이스(프로젝트 루트 폴더)의 .vscode 폴더에 있는 launch.json 파일 또는 사용자 설정 또는 워크스페이스 설정에 저장합니다.

다음 스니펫은 Node.js 애플리케이션 디버깅을 위한 샘플 구성을 설명합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

VS Code는 여러 구성을 동시에 시작하기 위한 복합 시작 구성도 지원합니다.

참고

VS Code에 폴더가 열려 있지 않아도 간단한 애플리케이션을 디버그할 수 있지만, 시작 구성을 관리하고 고급 디버깅을 설정하는 것은 불가능합니다.

디버그 구성 파일 만들기

초기 launch.json 파일 만들기

  1. 실행 및 디버그 보기에서 launch.json 파일 만들기를 선택합니다.

    launch configuration

  2. VS Code는 디버그 환경을 감지하려고 시도합니다. 감지할 수 없는 경우 수동으로 선택할 수 있습니다.

    debug environment selector

    선택한 디버그 환경을 기반으로 VS Code는 launch.json 파일에 시작 구성을 만듭니다.

  3. 탐색기 보기(⇧⌘E (Windows, Linux Ctrl+Shift+E))에서 VS Code가 .vscode 폴더를 만들고 launch.json 파일을 워크스페이스에 추가했는지 확인합니다.

    launch.json in Explorer

이제 launch.json 파일을 편집하여 구성을 추가하거나 기존 구성을 수정할 수 있습니다.

launch.json에 구성 추가

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

  • 구성 추가 버튼을 누르고 스니펫을 선택하여 미리 정의된 구성을 추가합니다.
  • 커서가 `configurations` 배열 안에 있으면 IntelliSense를 사용합니다.
  • 실행 > 구성 추가 메뉴 옵션을 선택합니다.

launch json suggestions

AI로 시작 구성 생성

VS Code의 Copilot을 사용하면 프로젝트의 시작 구성을 만드는 과정을 가속화할 수 있습니다. Copilot으로 시작 구성을 생성하려면

  1. ⌃⌘I (Windows, Linux Ctrl+Alt+I)로 채팅 보기를 열거나, 제목 표시줄의 Copilot 메뉴에서 채팅 열기를 선택합니다.

  2. 디버그 구성을 생성하려면 /startDebugging 채팅 프롬프트를 입력합니다.

    또는 *express 앱에 대한 디버그 구성 생성 #codebase*와 같은 사용자 지정 프롬프트를 입력할 수도 있습니다.

    워크스페이스에 다른 언어의 파일이 있는 경우 유용할 수 있습니다.

    참고

    #codebase 채팅 변수는 Copilot에 프로젝트의 컨텍스트를 제공하여 더 정확한 응답을 생성하는 데 도움을 줍니다.

  3. 제안된 구성을 적용한 후 디버깅을 시작합니다.

시작 구성을 사용하여 디버깅 세션 시작

시작 구성을 사용하여 디버그 세션 시작

  1. 실행 및 디버그 보기의 구성 드롭다운을 사용하여 프로그램 시작이라는 이름의 구성을 선택합니다.

    사용 가능한 구성 목록은 launch.json 파일의 구성과 일치합니다.

    Screenshot that shows the launch configuration dropdown.

  2. F5로 디버그 세션을 시작하거나 실행 및 디버그 보기의 디버깅 시작(재생 아이콘)을 선택합니다.

또는 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))를 통해 디버그: 디버깅 선택 및 시작으로 필터링하거나 'debug '를 입력하여 디버그하려는 구성을 선택하여 구성을 실행할 수 있습니다.

시작 및 연결 구성 비교

VS Code에는 시작 및 연결이라는 두 가지 핵심 디버깅 모드가 있으며, 이는 두 가지 다른 워크플로우와 개발자 세그먼트를 처리합니다. 워크플로우에 따라 프로젝트에 적합한 구성 유형을 아는 것이 혼란스러울 수 있습니다.

브라우저 개발자 도구 배경에서 온 경우, 브라우저 인스턴스가 이미 열려 있으므로 "도구에서 시작"하는 데 익숙하지 않을 수 있습니다. DevTools를 열면 단순히 열려 있는 브라우저 탭에 DevTools를 **연결**하는 것입니다. 반대로 서버 또는 데스크톱 배경에서 온 경우, 편집기가 프로세스를 **시작**하도록 하는 것이 일반적이며, 편집기는 자동으로 디버거를 새로 시작된 프로세스에 연결합니다.

시작과 연결의 차이를 설명하는 가장 좋은 방법은 시작 구성이 VS Code가 연결되기 *전에* 디버그 모드로 앱을 시작하는 방법에 대한 레시피인 반면, 연결 구성은 이미 실행 중인 앱 또는 프로세스에 VS Code의 디버거를 연결하는 방법에 대한 레시피라고 생각하는 것입니다.

VS Code 디버거는 일반적으로 디버그 모드로 프로그램을 시작하거나 디버그 모드로 이미 실행 중인 프로그램에 연결하는 것을 지원합니다. 요청(`attach` 또는 `launch`)에 따라 다른 특성이 필요하며, VS Code의 `launch.json` 유효성 검사 및 제안이 이를 도와줄 것입니다.

launch.json 특성

다양한 디버거와 디버깅 시나리오를 지원하는 데 도움이 되는 `launch.json` 특성이 많이 있습니다. `type` 특성에 값을 지정한 후 IntelliSense(⌃Space (Windows, Linux Ctrl+Space))를 사용하여 사용 가능한 특성 목록을 볼 수 있습니다. 시작 구성에서 사용 가능한 특성은 디버거마다 다릅니다.

launch json suggestions

한 디버거에 사용 가능한 특성이 다른 디버거에도 자동으로 작동하는 것은 아닙니다. 시작 구성에서 빨간색 물결선이 보이면 위에 마우스를 올려놓고 문제가 무엇인지 확인하고 디버그 세션을 시작하기 전에 수정해 보세요.

다음 특성은 모든 시작 구성에 필수적입니다.

  • type - 이 시작 구성에 사용할 디버거 유형입니다. 설치된 모든 디버그 확장은 유형을 도입합니다. 예를 들어, 내장 Node 디버거의 경우 `node`이며 PHP 및 Go 확장의 경우 `php` 및 `go`입니다.
  • request - 이 시작 구성의 요청 유형입니다. 현재 launch 및 `attach`가 지원됩니다.
  • name - 디버그 시작 구성 드롭다운에 표시될 사람이 읽을 수 있는 이름입니다.

다음은 모든 시작 구성에서 사용할 수 있는 선택적 특성입니다.

  • presentation - `presentation` 객체에서 `order`, `group`, `hidden` 특성을 사용하여 디버그 구성 드롭다운 및 디버그 빠른 선택에서 구성 및 복합을 정렬, 그룹화 및 숨길 수 있습니다.
  • preLaunchTask - 디버그 세션 시작 전에 작업을 시작하려면 이 특성을 워크스페이스의 .vscode 폴더에 있는 tasks.json에 지정된 작업의 레이블로 설정합니다. 또는 기본 빌드 작업을 사용하기 위해 ${defaultBuildTask}로 설정할 수 있습니다.
  • postDebugTask - 디버그 세션이 끝날 때 작업을 시작하려면 이 특성을 워크스페이스의 .vscode 폴더에 있는 tasks.json에 지정된 작업의 이름으로 설정합니다.
  • internalConsoleOptions - 이 특성은 디버깅 세션 동안 디버그 콘솔 패널의 가시성을 제어합니다.
  • debugServer - 디버그 확장 작성자 전용: 이 특성을 사용하면 디버그 어댑터를 시작하는 대신 지정된 포트에 연결할 수 있습니다.
  • serverReadyAction - 디버그 중인 프로그램이 디버그 콘솔 또는 통합 터미널에 특정 메시지를 출력할 때마다 웹 브라우저에서 URL을 열고 싶을 때 사용합니다. 자세한 내용은 아래 서버 프로그램 디버깅 시 URI 자동 열기 섹션을 참조하세요.

많은 디버거가 다음 특성 중 일부를 지원합니다.

  • program - 디버거를 시작할 때 실행할 실행 파일 또는 파일
  • args - 디버그할 프로그램에 전달되는 인수
  • env - 환경 변수 (`null` 값은 변수를 "정의 해제"하는 데 사용할 수 있습니다)
  • envFile - 환경 변수가 포함된 dotenv 파일 경로
  • cwd - 종속성 및 기타 파일을 찾기 위한 현재 작업 디렉터리
  • port - 실행 중인 프로세스에 연결할 때의 포트
  • stopOnEntry - 프로그램이 시작될 때 즉시 중단
  • console - 사용할 콘솔 유형 (예: internalConsole, integratedTerminal 또는 externalTerminal)

변수 치환

VS Code는 일반적으로 사용되는 경로 및 기타 값을 변수로 사용할 수 있으며, `launch.json`의 문자열 내 변수 치환을 지원합니다. 즉, 디버그 구성에서 절대 경로를 사용할 필요가 없습니다. 예를 들어, ${workspaceFolder}는 워크스페이스 폴더의 루트 경로를 제공하고, ${file}은 활성 편집기에서 열린 파일을 제공하며, ${env:Name}은 'Name' 환경 변수를 제공합니다.

미리 정의된 변수의 전체 목록은 변수 참조에서 확인하거나 `launch.json` 문자열 특성 내에서 IntelliSense를 호출하여 확인할 수 있습니다.

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

플랫폼별 속성

VS Code는 디버거가 실행되는 운영 체제에 따라 달라지는 디버깅 구성 설정(예: 프로그램에 전달될 인수)을 정의하는 것을 지원합니다. 이렇게 하려면 `launch.json` 파일에 플랫폼별 리터럴을 넣고 해당 리터럴 내에 해당 속성을 지정합니다.

다음 예는 Windows에서 프로그램에 "args"를 다르게 전달하는 방법을 보여줍니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

유효한 운영 체제 속성은 Windows의 경우 "windows", Linux의 경우 "linux", macOS의 경우 "osx"입니다. 운영 체제별 범위에 정의된 속성은 전역 범위에 정의된 속성을 재정의합니다.

type 속성은 플랫폼별 섹션에 배치할 수 없습니다. 왜냐하면 `type`은 원격 디버깅 시나리오에서 플랫폼을 간접적으로 결정하므로 순환 종속성이 발생하기 때문입니다.

다음 예에서 프로그램 디버깅은 macOS를 제외하고 항상 **시작 시 중단**됩니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

전역 시작 구성

모든 워크스페이스에서 사용할 수 있는 시작 구성을 정의할 수 있습니다. 전역 시작 구성을 지정하려면 launch 사용자 설정에 시작 구성 객체를 추가합니다. 이 `launch` 구성은 모든 워크스페이스에서 공유됩니다. 예시:

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

디버그 대상과의 입력/출력 리디렉션

입력/출력 리디렉션은 디버거 또는 런타임에 따라 다르므로 VS Code에는 모든 디버거에 작동하는 내장 솔루션이 없습니다.

고려해 볼 만한 두 가지 접근 방식이 있습니다.

  • 디버그할 프로그램("디버그 대상")을 터미널 또는 명령 프롬프트에서 수동으로 시작하고 필요한 대로 입출력을 리디렉션합니다. 디버거가 연결될 수 있도록 디버그 대상에 적절한 명령줄 옵션을 전달해야 합니다. "연결" 디버그 구성을 만들고 실행하여 디버그 대상에 연결합니다.

  • 사용 중인 디버거 확장이 VS Code의 통합 터미널(또는 외부 터미널)에서 디버그 대상을 실행할 수 있다면, 셸 리디렉션 구문(예: "<" 또는 ">")을 인수로 전달해 볼 수 있습니다.

    다음은 샘플 launch.json 구성입니다.

    {
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

    이 접근 방식은 "<" 구문이 디버거 확장을 통해 전달되어 통합 터미널에 수정되지 않고 전달되어야 합니다.

복합 시작 구성

여러 디버그 세션을 시작하는 대안적인 방법은 *복합* 시작 구성을 사용하는 것입니다. `launch.json` 파일의 `compounds` 속성에 복합 시작 구성을 정의할 수 있습니다.

병렬로 시작해야 하는 두 개 이상의 시작 구성 이름을 나열하려면 `configurations` 특성을 사용합니다.

선택적으로 개별 디버그 세션이 시작되기 전에 실행되는 `preLaunchTask` 작업을 지정합니다. `stopAll` 불리언 플래그는 한 세션을 수동으로 종료하는 것이 복합 세션 전체를 중지할지 여부를 제어합니다.

{
  "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
    }
  ]
}

복합 시작 구성은 시작 구성 드롭다운 메뉴에도 표시됩니다.

서버 프로그램 디버깅 시 URI 자동 열기

웹 프로그램을 개발하려면 일반적으로 디버거에서 서버 코드를 히트하기 위해 웹 브라우저에서 특정 URL을 열어야 합니다. VS Code에는 이 작업을 자동화하는 내장 기능 "serverReadyAction"이 있습니다.

다음은 간단한 Node.js Express 애플리케이션의 예입니다.

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

이 애플리케이션은 먼저 "/" URL에 대한 "Hello World" 핸들러를 설치한 다음 포트 3000에서 HTTP 연결을 수신 대기하기 시작합니다. 포트는 디버그 콘솔에 공지되며, 일반적으로 개발자는 이제 브라우저 애플리케이션에 https://:3000을 입력합니다.

serverReadyAction 기능을 사용하면 모든 시작 구성에 구조화된 serverReadyAction 속성을 추가하고 "작업"을 선택하여 수행할 수 있습니다.

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "https://:%s",
    "action": "openExternally"
  }
}

여기서 `pattern` 속성은 포트를 알리는 프로그램의 출력 문자열을 일치시키기 위한 정규식을 설명합니다. 포트 번호 패턴은 정규식 캡처 그룹으로 사용할 수 있도록 괄호 안에 있습니다. 이 예에서는 포트 번호만 추출하지만 전체 URI를 추출할 수도 있습니다.

`uriFormat` 속성은 포트 번호가 URI로 변환되는 방법을 설명합니다. 첫 번째 `%s`는 일치하는 패턴의 첫 번째 캡처 그룹으로 대체됩니다.

결과 URI는 VS Code 외부("외부")에서 URI 스킴에 구성된 표준 애플리케이션으로 열립니다.

Microsoft Edge 또는 Chrome을 통해 디버깅 트리거

대안으로, `action`을 `debugWithEdge` 또는 `debugWithChrome`으로 설정할 수 있습니다. 이 모드에서는 Chrome 또는 Microsoft Edge 디버그 세션에 전달되는 `webRoot` 속성을 추가할 수 있습니다.

간단하게 하기 위해 대부분의 속성은 선택 사항이며 다음의 대체 값을 사용합니다.

  • pattern: "listening on.* (https?://\\S+|[0-9]+)" 이는 일반적으로 사용되는 메시지 "listening on port 3000" 또는 "Now listening on: https://:5001"과 일치합니다.
  • uriFormat: "https://:%s"
  • webRoot: "${workspaceFolder}"

임의의 시작 구성 트리거

경우에 따라 브라우저 디버그 세션에 대해 더 많은 옵션을 구성하거나 완전히 다른 디버거를 사용해야 할 수 있습니다. `action`을 `startDebugging`으로 설정하고 `pattern`이 일치할 때 시작할 시작 구성의 이름으로 설정된 `name` 속성을 사용하여 이를 수행할 수 있습니다.

이름이 지정된 시작 구성은 `serverReadyAction`이 있는 구성과 동일한 파일 또는 폴더에 있어야 합니다.

여기 serverReadyAction 기능이 작동하는 모습입니다.

다음 단계

  • 작업 - Gulp, Grunt 및 Jake로 작업을 실행하는 방법과 오류 및 경고를 표시하는 방법을 설명합니다.
  • 변수 참조 - VS Code에서 사용할 수 있는 변수를 설명합니다.

자주 묻는 질문

실행 및 디버그 보기 드롭다운에 시작 구성이 보이지 않습니다. 무엇이 잘못되었습니까?

가장 흔한 문제는 `launch.json`을 설정하지 않았거나 해당 파일에 구문 오류가 있는 것입니다. 또는 폴더를 열어야 할 수 있습니다. 폴더가 없는 디버깅은 시작 구성을 지원하지 않기 때문입니다.

12/10/2025
English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.