Next.js 디버그 모드

Next를 공부하며 가장 먼저 찾았던 디버그 모드 적용하는 방법을 소개합니다.

프로젝트 루트 경로에 ./vscode/launch.json 파일을 추가합니다.

 

그리고 파일안에 아래 내용을 저장합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

 

추가 후에 F5 버튼을 누르면 디버그 모드가 자동으로 실행됩니다.

 

이후에 원하는 곳을 클릭해 브레이크 포인트를 걸어줄 수 있습니다.

 

참고문서

Configuring: Debugging | Next.js