unable to debug Next.js app using visual code

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. vivek padelkar wants to to this question: 这个问题：

need proper guidance to improve my skills, through valid answer.

I am learning Next.js and and want to debug in visual code and chrome. I have tried different combination for launch.json to debug next.js app in visual code. I grab one of the the code from stack overflow itself. but it turns another failure. can you please help me how to debug in Next.js app in visual code using google chrome.

bellow is my launch.json file code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Example",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
      "port": 9229,
      "cwd": "${workspaceFolder}/frontend",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/frontend/*"
      }
    }
  ]
}

code for my.next.config.js

module.exports = {
  webpack(config) {
    config.devtool = 'cheap-module-eval-source-map'
    return config
  },
}

my package.json for frontend

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "Social networking app",
  "proxy": "http://127.0.0.1:8080",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "author": "Vivek padelkar",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.16.13",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "next": "^12.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-toastify": "^8.1.0"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

my folder structure is as follow:

outer pacakge.json code (ie path: SOCIAL NETWORK/pacakge.json"

{
  "name": "socialnetwoek",
  "version": "1.0.0",
  "description": "social network backend",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node backend/server",
    "server": "nodemon backend/server",
    "client": "npm run dev --prefix frontend",
    "all": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Vivek Padelkar",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "colors": "^1.4.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "esm": "^3.2.25",
    "express": "^4.17.1",
    "express-async-handler": "^1.2.0",
    "joi": "^17.4.2",
    "mongoose": "^6.0.12",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "concurrently": "^6.4.0",
    "nodemon": "^2.0.15"
  }
}

step that I am following:

1. while in root folder (ie. SOCIAL NETWORK) I am executing command npm run all .
2. then I press F5 to run debugger.

bellow is my vs screen i am running my Next.js app with chrome and all the debug points are grayed out.(highlighted with red box) but nothing is working.

note: I am completely newbie in Next.Js it is might possible i have done messed in folder structure or in code. your valuable help will be appreciated, thanks in advance

Answer 1

Next.js Docs has its dedicated documentation over Debugging.

Your .vscode/launch.json should be:

{
  "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": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

And no changes should be made with next.config.js .

npm run dev can be replaced with yarn dev if you're using Yarn. If you're changing the port number your application starts on, replace the 3000 in http://localhost:3000 with the port you're using instead.

You can select the type of debugging option you need from the dropdown.

Answer 2

Finally found solution, I have edited my launch.json in following way and everything is working as expected, thank you for your valuable time guys.

launch.json
{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend"
    },
    {
      "name": "Attach to Edge",
      "port": 9222,
      "request": "attach",
      "type": "pwa-msedge",
      "webRoot": "${workspaceFolder}/frontend"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend"
    },
    {
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "request": "launch",
      "type": "vscode-edge-devtools.debug",
      "url": "http://localhost:3000" // Provide your project's url to finish configuring
    }
  ]
}