Node JS Server Debugging(Chrome 사용)

Node JS Server를 디버깅 하는 방법은 여러가지가 있는데 (VS Code내 사용 등) 이번에는 Chrome에서 사용하는 방법을 정리해보려 합니다.

먼저 서버의 package.json으로 들어가서 start를 찾아보면 서버가 실행될 파일이 적혀있습니다.

"scripts": {
    "start": "server/basic-server.js",
    "test": "echo no test",
    "submit": "echo you don\\'t need to submit"
  },

 

서버.js 파일 앞에 node --inspect를 추가하고 서버를 시작합니다.

"scripts": {
    "start": "node --inspect server/basic-server.js",
    "test": "echo no test",
    "submit": "echo you don\\'t need to submit"
  },

 

 

nodemon도 inspect기능을 제공합니다. nodemon과 함께 사용하면 스크립트를 수정하고 저장하면 바로 서버에 적용되고, 
크롬 개발자 도구 디버깅도 동시에 진행 할 수 있습니다. 

  "scripts": {
    "start": "nodemon --inspect server/basic-server.js",
    "test": "echo no test",
    "submit": "echo you don\\'t need to submit"
  },

크롬을 실행하고 개발자 모드로 들어갑니다. 기존에 없던 초록색 모양의 버튼이 보이시나요? 해당 버튼을 클릭합니다.

크롬 개발자 도구

 

아래 화면과 같이 Node JS 서버 코드를 디버깅 해보고 확인할 수 있는 Dev Tool이 실행됩니다.!

 

참조

https://nodejs.org/en/docs/guides/debugging-getting-started/