TypeScript 디버깅

Visual Studio Code는 내장된 Node.js 디버거와 Edge 및 Chrome 디버거를 통해 TypeScript 디버깅을 지원합니다.

JavaScript 소스 맵 지원

TypeScript 디버깅은 JavaScript 소스 맵을 지원합니다. TypeScript 파일에 대한 소스 맵을 생성하려면 --sourcemap 옵션으로 컴파일하거나 tsconfig.json 파일에서 sourceMap 속성을 true로 설정하세요.

인라인 소스 맵 (별도 파일 대신 데이터 URL로 내용이 저장되는 소스 맵)도 지원하지만, 인라인 소스 자체는 아직 지원되지 않습니다.

소스 맵 작동의 간단한 예시는 TypeScript 튜토리얼에서 확인할 수 있습니다. 이 튜토리얼에서는 다음 tsconfig.json 및 VS Code 기본 Node.js 디버깅 구성을 사용하여 간단한 "Hello World" Node.js 애플리케이션을 디버깅하는 방법을 보여줍니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

더 고급 디버깅 시나리오를 위해 사용자 지정 디버그 구성 launch.json 파일을 만들 수 있습니다. 기본 구성을 보려면 실행 및 디버그 보기 (⇧⌘D (Windows, Linux Ctrl+Shift+D))로 이동하여 launch.json 파일 만들기 링크를 선택하세요.

이렇게 하면 프로젝트에서 감지된 기본값으로 .vscode 폴더에 launch.json 파일이 생성됩니다.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/helloworld.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

VS Code는 실행할 프로그램인 helloworld.ts를 결정하고, 빌드를 preLaunchTask로 포함했으며, 생성된 JavaScript 파일을 어디서 찾을지 디버거에게 알려주었습니다.

launch.json에 대한 제안 및 정보와 함께 완전한 IntelliSense를 제공하여 다른 디버그 구성 옵션을 배울 수 있도록 도와줍니다. 오른쪽 하단의 구성 추가 버튼을 사용하여 launch.json에 새 디버그 구성을 추가할 수도 있습니다.

launch.json IntelliSense

예제 및 추가 설명을 보려면 Node.js 디버깅도 참조하세요.

출력 위치 매핑

생성된 (트랜스파일된) JavaScript 파일이 소스 옆에 있지 않은 경우, launch.json 구성에서 outFiles 속성을 설정하여 VS Code 디버거가 해당 파일을 찾도록 도울 수 있습니다. 원본 소스에 중단점을 설정할 때마다 VS Code는 outFiles의 glob 패턴으로 지정된 파일을 검색하여 생성된 소스를 찾으려고 시도합니다.

클라이언트 측 디버깅

TypeScript는 Node.js 애플리케이션뿐만 아니라 클라이언트 측 코드를 작성하는 데에도 훌륭하며, 내장된 Edge 및 Chrome 디버거를 사용하여 클라이언트 측 소스 코드를 디버깅할 수 있습니다.

클라이언트 측 디버깅을 보여주기 위해 작은 웹 애플리케이션을 만들어 보겠습니다.

새 폴더 HelloWeb을 만들고 다음 내용으로 세 개의 파일: helloweb.ts, helloweb.html, tsconfig.json을 추가하세요.

helloweb.ts

let message: string = 'Hello Web';
document.body.innerHTML = message;

helloweb.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript Hello Web</title></head>
    <body>
        <script src="out/helloweb.js"></script>
    </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

tsc를 실행하여 앱을 빌드한 다음 브라우저에서 helloweb.html을 열어 테스트하세요 (파일 탐색기에서 helloweb.html을 마우스 오른쪽 버튼으로 클릭하고 경로 복사를 선택하여 브라우저에 붙여넣을 수 있습니다).

실행 및 디버그 보기 (⇧⌘D (Windows, Linux Ctrl+Shift+D))에서 launch.json 파일 만들기를 선택하여 디버거로 Web App (Edge) 또는 원하는 경우 Web App (Chrome)을 선택하는 launch.json 파일을 생성합니다.

launch.json을 업데이트하여 helloweb.html의 로컬 파일 URL을 지정하세요.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "file:///C:/Users/username/HelloWeb/helloweb.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

이제 실행 및 디버그 보기 구성 드롭다운에 새 구성인 localhost에 Edge 실행이 표시됩니다. 해당 구성을 실행하면 웹 페이지가 있는 브라우저가 시작됩니다. 편집기에서 helloweb.ts를 열고 왼쪽 여백을 클릭하여 중단점(빨간색 원으로 표시됨)을 추가하세요. F5 키를 눌러 디버그 세션을 시작하면 브라우저가 실행되고 helloweb.ts의 중단점에서 멈춥니다.

client-side debug breakpoint

자주 묻는 질문

해당 JavaScript를 찾을 수 없어 프로그램을 실행할 수 없습니다.

tsconfig.json에서 `"sourceMap": true`를 설정하지 않았거나 launch.json에서 outFiles를 설정하지 않은 것으로 보이며, VS Code Node.js 디버거가 TypeScript 소스 코드를 실행 중인 JavaScript에 매핑할 수 없습니다. 소스 맵을 켜고 프로젝트를 다시 빌드하세요.

12/10/2025