node.js 디버깅 방법

크롬브라우저를 이용하여 node 어플리케이션을 debugging(디버깅)하는 방법을 알아봅시다.

Node JS 첫걸음/Hello World 사이트를 예제로 사용합니다.

hello world 프로젝트 사이트로 이동 후, 아래와 같이 어플리케이션을 실행해 줍니다.

$ node --inspect index.js

Nodemon을 사용한다면 다음과 같이 사용할 수도 있습니다.

$ nodemon --inspect

위와 같이 Debugger listening on ... 문구가 추가로 화면에 보이면 성공입니다.

**위 메세지를 보면 디버깅을 위해 127.0.0.1:9229 주소를 사용하는데 이 주소는 기본값입니다. 만약 이 주소를 변경하고 싶으면 --inspect=호스트:포트의 형태로 node, nodemon을 실행하면 주소를 변경할 수 있습니다.

디버깅을 위해선 127.0.0.1:9229로 접속하는 것이 아니고, chrome 브라우저를 실행한 후에 chrome://inspect 로 들어갑니다.

10초정도 기다리면 위와 같이 target이 표시됩니다. inspect를 눌러줍시다.

이 창으로 디버깅을 할 수 있습니다. console.log로 출력되는 모든 문자는 Console 탭에 출력이 됩니다. 코드를 보기 위해서 출력된 메세지의 우측 /c:/workspace/hello-world/index.js:17 로 된 부분을 눌러줍니다.

Source 탭으로 이동하면서 현재 실행중인 코드가 보이게 됩니다.

/hello/:nameParam route 코드에 break-point를 잡아줍시다. 각 코드 왼쪽에 줄번호가 있는데, 줄번호를 눌러주면 breakpoint를 설정할 수 있습니다.

파란색 breakpoint 표시가 생겼습니다. 이제부터 해당 위치의 코드가 실행될 때마다 사이트가 멈추고 디버깅을 할 수 있습니다.

/hello/:nameParam route 코드를 실행시키기 위해 새 창에 http://localhost:3000/hello/jason를 입력해 줍니다.

페이지가 표시되지 않고 계속 로딩이라고 표시가 됩니다. 왜냐면 코드의 실행이 디버깅 창때문에 멈췄기 때문입니다.

다시 디버깅 창으로 돌아옵시다. 12번째 줄의 코드가 파란색으로 하일라이트되었습니다. 현재 코드의 실행이 그 줄에 멈춰있다는 뜻입니다.

Console탭으로 돌아가거나 Source 탭에서 esc를 눌러 console을 띄운 후에 req.params을 입력하면 해당 값이 출력되는 것을 볼 수 있습니다.

이처럼 디버깅 창을 통해 코드가 멈춘 상태에서 변수의 값을 검사하거나, 변경할 수 있습니다. 또한 현재 코드의 위치에서 실행가능한 함수도 실행할 수 있습니다.

F10키를 눌러 다음줄로 이동할 수 있으며, 해당 줄에 함수의 호출이 있는 경우 F11키를 눌러 해당 함수의 코드로 이동할 수도 있습니다. 디버깅이 끝나면 F8키를 눌러 코드를 코드를 다시 계속 진행시킬 수 있습니다.

사이트 제작중에 에러가 뜬다면:

  1. 에러메세지를 분석하여 어느줄에서 에러가 발생하는지를 찾고 해당코드에 breakpoint를 놓습니다.
  2. 에러를 발생시키는 함수/변수에 사용되는 값들을 살펴봅니다.
  3. 이 값들이 내가 코드를 작성할 때 기대했던 값과 어떻게 다른지, 왜 다른지를 생각하고,
  4. 이 값들을 내가 기대하는 값이 되도록 코드로 변경하거나, 이 값들을 처리할 수 있도록 에러를 발생시키는 함수/변수의 코드를 변경합니다.

댓글

처음처럼 2020.01.29
고맙습니다. ^______^
I
Ian H 2020.01.29
@처음처럼,
👍👍
-
-24 2020.02.05
좋은 정보 감사합니다! 안될 때마다 계속 다시하고 천천히 읽어보니 해결할 수 있었습니다. 예전의 올리시던 블로그에서 넘어왔는데 정보를 업데이트 해주시는 배우는데 어려움이 없습니다~ 감사합니다
I
Ian H 2020.02.05
@-24,
댓글 남겨주셔서 감사합니다^^ 질문있으시면 언제든지 또 댓글 남겨주세요. 화이팅!
류정철 2020.02.08
정말 좋은 정보 감사합니다. 두 가지 여쭤보고 싶은게 있는데요,  1. 한국 기준 MongoDB 강의를 거의 찾아보기 힘들더라구요. 대부분 nodejs + mysql 이던데, 이게 한국에서 개발환경이 대부분 이렇게 이뤄져서 그런 건지 아니면 그만한 다른 이유가 있는 건지 궁금합니다. 해외 있다보니 주로 Udemy를 이용해 수업을 듣는데 아무래도 영어다 보니 이해가 안되는 부분을 한국어로 듣고 싶은데 정말 찾아보기 힘듭니다. Udemy 2020년 기준 nodejs는 mongdb랑 항상 묶음으로 컨텐츠가 제작되고 사용되는듯 한데,  한국에서는  대부분 mysql을  사용하는 특별한 이유가 있는건가요?. 제가 많이 부족해서 잘 못 찾거나, 모르는 부분이 있는건지 아니면 대부분 컨텐츠 제작자분들이 본인이 익숙한 데이터 베이스를 선택하는건지 궁금합니다.
2. 게시판 만들어서 간단한 커뮤니티 사이트를 완성해보고 싶은데, node js로 게시판 만드는 자료는  찾아보기 힘들더라구요..( 제가 못찾는거일수도...) 대부분 JSP +Spring ,PHP를 사용해 게시판을 만드는데, 이것 또한 익숙한 방식을 택해서 강의를 생산해 내는 것인지 아니면, node js보다 훨씬 게시판 제작이 수월해서 저 방식을 택하는 것인지 궁금합니다. 제가 그나마 익숙한 언어가 jacascript라서 node js로 게시판을 구현하고 싶은데 제대로된 강의가 없더라구요 ㅠ 
길고 허접한 질문드려서 죄송합니다. 아무쪼록 좋은 자료 잘 보겠습니다. 감사합니다. 
I
Ian H 2020.02.09
@류정철,
저도 프로그래밍을 미국에서 시작해서 잘 모르지만 한국은 java, php, mssql, react를 많이 쓰는 것 같아요. 제대로 답변드리지 못해서 죄송합니다..
이미 Udemy에서 강의를 들으실 정도면 영어를 더 공부하시는 것을 강추드립니다. 네이버랑 구글, stockoverflow랑은 프로그래밍자료의 양이 비교불가라서요. 영어를 잘하는 것이 프로그래밍에 엄청난 어드벤티지가 됩니다. 구글에 영어로 검색하면 거의 다 나와요.
Node.js+mongoDB 게시판은 제 블로그의 게시판 만들기 강의(https://www.a-mean-blog.com/ko/blog/Node-JS-첫걸음/게시판-만들기)를 참고해 보세요. 감사합니다~~
류정철 2020.02.09
@Ian H,
답변 정말 감사합니다. 영어를 잘했더라면 Udemy 강의만 듣지 굳이 한국어로된 자료를 찾으러 다니지 않았겟죠 ㅠㅠ  뼈아픈 현실이네요..ㅋ  게시판 만드는 자료 한글로 찾다가 여기 들어오게 됐습니다. 정말 좋은자료 감사합니다 ㅋㅋ 모국어가 확실히 한국어이다 보니 한국어로 설명해주면 이해가 쏙쏙되는데 ㅠㅠ  영어로 들으면 분명 다 이해했다고 생각했는데 거의 알츠하이머 환자마냥 뒤돌아서면 잊어버리길 반복합니다 ㅠㅠ 그렇다고 한글자료에 의존하기엔 정말 턱없이 부족한 자료들 때문에 결국 다시 영어권 커뮤니티를 전전해야하는 아이러닉한 상황입니다... ㅋ  
I
Ian H 2020.02.10
@류정철,
그래도 Udemy강의 들으실 정도는 되시니까 아예 영어를 못하시는 분들보다는 훨씬 쉬우실 꺼에요^^ 프로그래밍할때 왜 영어를 배워야 하는지 이미 알고 계시니까 동기부여도 될테구요.
조금 희망적인 이야기를 해드리자면, (이미 알고 계시겠지만...) 어차피 프로그래밍 어휘는 이미 영어가 많고(float, constructor, implement, interface, inheritance ....), 필요한 어휘 양이 그렇게 많지 않아서 몇개월만 단어장 만들어 가며 공부하시면 금방 익숙해 지실거에요. 유튜브에서 이미 알고 있는 내용의 프로그래밍 강의를 영어공부를 위해 들어 보시는 것도 추천드려요. 예를들어 'javascript for beginners' 같은 걸로요. 기초도 복습하고 영어공부도 하고 일석이조!
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP