본문 바로가기
React.js

Next.js 디버깅 설정방법

by CodeDiver 2021. 1. 15.

VSCode를 통한 결합 된 서버 + 브라우저 디버깅?

Debugger for Chrome 확장 프로그램을 사용하여 단일 VSCode 실행 명령에서 서버 및 클라이언트 실행을 모두 디버깅 할 수도 있습니다 .

 

package.json

 

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "debug": "node --inspect-brk ./node_modules/next/dist/bin/next"

  },

 

 

 

.vscode/launch.json

 

{

  "version": "0.2.0",

  "configurations": [

    {

      "type": "chrome",

      "request": "launch",

      "name": "Launch Chrome",

      "url": "http://localhost:3000",

      "webRoot": "${workspaceFolder}"

    },

    {

      "type": "node",

      "request": "launch",

      "name": "Launch Next.js",

      "runtimeExecutable": "npm",

      "runtimeArgs": ["run-script", "debug"],

      "port": 9229

    }

  ],

  "compounds": [

    {

      "name": "Debug Next.js + Chrome",

      "configurations": ["Launch Next.js", "Launch Chrome"]

    }

  ]

}