unable to debug Next.js app using visual code-CodePudding

The

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

step 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.

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

CodePudding user response：

CodePudding user response：

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