소개

TypeScript 개발에서는 ts-node를 사용하여 컴파일하지 않고 그대로 실행할 수 있습니다.
Node.js 응용 프로그램은 --inspect를 부여하고 시작하여 디버깅을 수행 할 수 있습니다.
이 절에서는 WebStorm에서 ts-node를 통해 응용 프로그램의 설정을 요약합니다.

ts-node가 프로젝트에 설치되어 있다고 가정합니다.

환경

WebStorm 2019.2.3

Node.js

주 메뉴의 Run - Edit Configrations에서 Node.js 설정을 추가합니다.Node parameters에 --require ts-node/register를 추가합니다.
현재 버전에서는 --inspect를 지정하지 않아도 작동하는 것 같습니다.
ts-node CLI 옵션을 부여하려면 ts-node 환경 변수를 Environment variables에 추가하여 사용할 수 있습니다.



실제로 브레이크 포인트를 설정하고 실행하면 정지하는 것을 알 수 있습니다.

Jest

Jest를 사용한 테스트에서도 디버깅할 수 있습니다.
Jest 설정을 추가합니다.Node options에 --require ts-node/register를 추가합니다.



테스트 파일에서 중단점을 설정하고 실행하면 중지됨을 알 수 있습니다. 프로덕션 코드에 중단점을 설정해도 마찬가지로 중지됩니다.

그래서 몬

nodemon은 소스 코드 변경을 감지하고 다시로드하는 도구입니다.
WebStorm은 다시 로드할 때 다시 연결하여 디버깅을 계속할 수 있습니다.
nodemon이 프로젝트에 설치되어 있다고 가정합니다.

nodemon 시작시의 설정은 다음과 같이 nodemon.json에 기재합니다.

nodemon.json

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "node --inspect --require ts-node/register src/app.ts"
}

다음과 같이 npm scripts에서 nodemon이 시작되는 명령을 추가합니다.

package.json

"scripts": {
  "dev": "nodemon"
}

추가한 명령으로 nodemon을 시작합니다.

$ npm run dev

Attach to a Node.js/Chrome 설정을 추가합니다.Reconnect automatically를 선택합니다.



이 상태에서 실행하면 소스 코드를 수정해도 다시 연결되어 디버깅할 수 있습니다.

참고

Running and Debugging Node.js - Help | WebStorm
ts-node를 WebStorm에서 디버깅 실행 - Qiita