Node.js 디버깅

우리가 짠 코드가 정상적으로 작동하지 않을 때 우리는 원인을 파악해서 디버깅 해야 한다.

디버깅 작업은 2가지로 접근할 수 있는데

Visual Studio Code로 진행하는 방식, 크롬으로 진행하는 방식이다.

Visual Studio Code

나는 다음과 같은 간단한 파일을 작성해서 진행해볼 예정이다

1. 좌측의 탭 중 밑에서 2번째 디버그 탭을 선택하고 create a launch.json file을 선택. 그러면 프로그래밍 언어나 라이브러리 종류를 선택하게 될텐데 나 같은 경우는 Node.js로 선택했다. 각자가 사용하는 것에 맞게 선택하면 되겠다

2. 다시 좌측의 첫번째 파일 목록 탭으로 넘어가서 확인하고 싶은 구문에 break point를 걸어준다. 구문의 라인번호 좌측을 클릭하면 빨간 점이 생성될 것이다

3. 다시 디버깅 탭으로 이동해서 Launch Program 옆 화살표 버튼을 눌러주면 break 걸어놓았던 구문의 실행 결과를 확인할 수 있을 것이다. 실행되었을 때 찍히는 값들을 파악하여 디버깅을 진행할 수 있다.

Chrome 디버깅

1. 확인하고 싶은 부분에 console.log를 찍는다 ( console.log(req) )

2. package.json 파일에 들어가 scripts의 start 부분을 node -- inspect ( 확인할 파일 ) 로 변경해주고 터미널 창에 npm start를 타이핑한다. 그러면 터미널에서 디버거가 실행되었다는 문구가 뜬다
   

3. 크롬 새 탭을 열어 개발자 도구창을 열고 좌측 상단의 node.js 아이콘을 클릭한다 ( Elements 탭 좌측의 초록 육각형 )
   

4. Postman을 열어서 GET 요청을 보낸 후 전송된 데이터를 확인해본다
   

만약 특정 구문만을 확인하고 싶다, 즉 break 포인트를 걸고 싶다면 package.json에서 start 구문을 --inspect-brk ( 파일 ) 로 바꿔준 후 위의 과정을 반복하면 첫구문부터 정지해서 원하는 구문에서의 결과를 확인할 수 있다.

우측 상단의 화살표 버튼으로 실행을 원하는 구문을 선택하고 버튼 클릭하면 결과가 나온다