웹개발/node.js

[node.js] node.js, npm 기반 프로젝트 디버깅 꿀팁(babel사용시, 인텔리제이)

건뱅 2020. 3. 15.

이번에 회사에서 Redux를 사용하여 개발을 하고있는데, node.js 개발환경에서 Babel을 사용하여 ES6이상문법을 ES5로 바꾸어서 빌드를 시켜준다.

이과정에서 크롬개발자도구를 사용하여 디버깅을 할때 작성코드와 다르게 변환된 코드가 나와서 디버깅하기가 너무 난해하여 방법을 찾아보았다.. 그 결과 인텔리제이에서 바로 디버깅 할 수있는 방법을 알아냈다.

정리해보면 다음과 같다.

1. JetBraint 설치

먼저 크롬앱스에 들어가서 JetBrain을 설치한다.

JetBrains IDE Support

HTML/CSS/JavaScript editing and JavaScript debugging using JetBrains IDEs.

chrome.google.com

2. webpack.config.js 설정

webpack.config.js 파일에들어가서

module.exports = {} 이안에

devtool: "cheap-module-eval-source-map" 을 추가해줍니다..

3. 프로젝트를 debug 모드로 실행

해당프로젝트를 debug모드로 실행시킵니다. (필자는 인텔리제이를 사용합니다. )

4. 실행시킨 페이지에서 JetBrain아이콘을 오른쪽 클릭 후 Inspect in IDEA 클릭합니다.

5. 인텔리제이에서 브레이크 포인트를 걸고 해당하는 로직을 실행시키면 인텔리제이에서 디버깅이 가능합니다.

댓글