웹 JS 애플리케이션 개발시 IntelliJ 디버거 사용하기

• IntelliJ Ultimate 혹은 Webstorm과 Chrome에 JetBrains IDE Support 플러그인이 설치된 환경에서 Vue, React 등의 모던 웹 프론트 개발 시 IntelliJ의 디버거를 활용하는 방법을 소개한다.

• 원격 디버깅을 위해 프로젝트를 먼저 실행한 후 IntelliJ에서 JavaScript Debug를 설정하고 디버거를 실행하면, 브라우저에서 원격 디버깅이 활성화되는 것을 확인할 수 있다.

• IntelliJ에서 Vue나 .js 파일에 브레이크 포인트를 설정하면, 해당 기능을 실행할 때 브레이크가 걸리며 IntelliJ 디버거를 사용할 수 있다.

• IntelliJ에서 npm run을 실행하려면, Edit Configurations에서 npm을 선택하고, 실행할 커맨드와 package.json 정보를 등록한 후 디버깅 모드로 실행하면 된다.