I’m trying to set up full-stack debugging for my Next.js application in VSCode by following the Next.js debugging docs. I’ve added the following configurations to my launch.json:
{
"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": "chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug client-side (Firefox)",
"type": "firefox",
"request": "launch",
"url": "http://localhost:3000",
"reAttach": true,
"pathMappings": [
{
"url": "webpack://_N_E",
"path": "${workspaceFolder}"
}
]
},
{
"name": "Next.js: debug full stack",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/next",
"runtimeArgs": ["--inspect"],
"skipFiles": ["<node_internals>/**"],
"serverReadyAction": {
"action": "debugWithEdge",
"killOnServerStop": true,
"pattern": "- Local:.+(https?://.+)",
"uriFormat": "%s",
"webRoot": "${workspaceFolder}"
}
}
]
}
In my package.json, I have the following script defined:
"scripts": {
"dev": "NODE_OPTIONS='--inspect' next dev --turbo",
// ...
}
When I try to run the Next.js: debug full stack configuration, instead of launching my application in debug mode, VSCode redirects me to the file at node_modules/.bin/next. That file is actually a shell script, and its content starts with:
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
...
I expected the debug full stack configuration to start the Next.js application with debugging enabled. Has anyone encountered this issue before? Is there a way to properly configure full-stack debugging for my Next.js app in VSCode given my current setup? Any help or insights would be greatly appreciated!