NextJS를 vscode로 Debugging 하는 방법

.vscode/launch.json 생성

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Next.js: debug full stack",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

 

package.json 수정

  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    ...
  },

윈도우에서는 cross-env 설치 필요

npm i cross-env

 

!!이제 환경 설정은 끝났음!!

 

npm run dev 실행 후

vscode에서 Ctrl+Shift+D 클릭 해서 Run & Debug 로 이동

Next.js: debug full stack 선택 후 실행(왼쪽 초록 삼각형 클릭)

 

!!실행 완료!!

 

이제 필요한 곳에 Break Point (중단점)을 찍고 크롬에서 해당 url을 호출하면 중단점에서 멈추게됨!

끝!!