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:

while in root folder (i.e.. SOCIAL NETWORK) I am executing command npm run all.
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.

Baldráni · Accepted Answer · 2022-03-14 11:18:49Z

6

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

answered Mar 14, 2022 at 11:18

Baldráni

5,6988 gold badges57 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andres martinez · Accepted Answer · 2022-10-14 04:29:21Z

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/

answered Oct 14, 2022 at 4:29

andres martinez

1,4693 gold badges13 silver badges23 bronze badges

Comments

vivek padelkar · Accepted Answer · 2021-11-24 06:38:39Z

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
    }
  ]
}

Collectives™ on Stack Overflow

unable to debug Next.js app using visual code

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related