unable to debug Next.js app using visual code

Question

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 studio code using google chrome.

Below 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 follows:

outer pacakge.json code (i.e. 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"
  }
}

Steps that I am following:

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

Below is my vs screen I am running my Next.js app with chrome and all the debug points are greyed out.(highlighted with red box)

but nothing is working.

Answer 1

Not a proper solution but I've manage without fixing it to run the "fullstack" debugger with this configuration (the one from the documentation).

    {
      "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"
      }
    }

Answer 2

The Next.js documentation over Debugging only works for the frontend or client files, but no to /api/files*, follow theres steps and you can debug your /api/files:

https://blogs.sap.com/2019/07/15/how-to-debug-a-node.js-rest-api-in-visual-studio-code-locally/