WebStorm으로 TypeScript debug 모드 사용하기

(2019-12-17에 작성된 글입니다)

 

WebStorm을 비롯한 JetBrains IDE를 사용할 때 강력한 debug 모드를 제공한다.
이번 포스팅에서는 TypeScript을 사용할 때 WebStorm으로 debug 모드 사용법을 알아보겠다.

 

---

 

• 먼저 빈 디렉토리를 생성하여 pacakage.json, tsconfig.json을 생성하자

$ npm init -y # init npm project
$ tsc -init # init typescript config

 

• 그리고 실행할 간단한 ts 파일 2개를 생성한다.

// hello.ts
export default function hello(name: string): string {
  return `Hello ${name}`;
}

// index.ts
import hello from "./hello";

const name = 'devson';
const message = hello(name);

console.log(message);

 

• Run/Debug Configurations 설정을 한다.

오른쪽 위에 Add Configurations...를 클릭한다.

 

+ 버튼(Add New Configuration)을 클릭하고 Node.js를 선택한다.

 

그리고 Node parameters에 --require ts-node/register,
JavaScript file에 index.ts를 설정한다.

 

Typescript를 실행할 수 있도록 dev dependency에 typescript와 ts-node를 추가한다.

$ npm i -D typescript ts-node

 

이제 모든 설정이 끝났고 break point를 걸고 debug를 실행하면 다음과 같이 잘 동작하는 것을 확인할 수 있다.