VS Code의 TypeScript 디버깅

Visual Studio Code(VS Code)는 TypeScript를 디버깅하는 기능을 기본적으로 가지고 있다. TypeScript 소스는 JavaScript로 컴파일되어 실행되는데, 원래의 TypeScript 소스와 실행되는 JavaScript 사이의 매핑 정보를 가지고 있는 파일을 소스 맵(source map)이라 한다. Visual Studio Code는 TypeScript 디버깅시 이 source map을 사용하여 실행되는 JavaScript에 상응하는 TypeScript 소스 정보를 얻게 된다.

TypeScript 소스코드에 대한 source map 파일(*.map)을 생성하기 위해서는, sourceMap 컴파일러 옵션을 true로 설정하면 된다. 예를 들어, 아래는 test.ts 로부터 test.js 파일과 source map인 test.js.map 파일을 생성하는 명령이다.

    C> tsc test.ts --sourceMap true

Visual Studio Code에서 디버깅을 위해, 흔히 Run 메뉴의 Start Debugging 메뉴 (F5)를 사용하는데, 이를 실행하면 TypeScript 프로젝트 구성파일인 tsconfig.json 을 사용하여 빌드하고 디버깅하게 된다. 따라서, 프로젝트 루트 폴더에 tsconfig.json 파일을 생성하고, 아래와 같이 tsconfig.json 파일의 compilerOptions 밑에 "sourceMap": true 를 추가하여 source map 파일을 생성하도록 설정한다. Visual Studio Code는 tsconfig.json 파일을 편집할 때, 인텔리센스 기능을 제공하므로 편리하다. 만약 sourceMap 옵션을 지정하지 않으면, source map 파일이 생성되지 않으며, 따라서 디버깅할 수 없다. 참고로 아래 outDir 옵션은 JavaScript 파일과 source map 파일이 출력되는 폴더 위치이다.

    {
        "compilerOptions": {
            "sourceMap": true,
            "outDir": "out"
        }
    }

Visual Studio Code에서 TypeScript 소스코드를 열고 필요한 곳에 중단점(breakpoint)을 두고, F5 (혹은 Run/Start Debugging)를 누르면, 프로젝트가 빌드되고 디버깅이 시작된다. 아래는 중단점을 두고 디버깅을 시작했을 때의 화면이다. 좌측에 사용되는 변수들의 값들을 볼 수 있고, 우측 상단에 디버거 컨트롤들을 볼 수 있다.

위의 경우는 NodeJS를 사용하여 JavaScript를 실행한 것이다. 만약 Browser 상에서 HTML 안의 JavaScript를 디버깅할 경우에는 VS Code에 "Debugger for Chrome" 혹은 "Debugger for FireFox" Extension을 설치하고 이 Debugger를 사용할 수 있다. VS Code에 "Debugger for Chrome" 등의 디버거가 설치된 경우, F5를 누르면 디버거로 Chrome을 사용할 지, Node를 사용할 지 선택하게 한다. 이때 Chrome을 선택하면 launch.json 구성파일(.vscode/launch.json)을 보여주는데, 이때 로컬 웹서버 url을 제대로 설정하면 디버깅을 시작할 수 있다.