Currently, I have to manually find which file(api endpoint) I to set breakpoint in /api folder in VSCode.
I have the following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to application",
"skipFiles": ["<node_internals>/**"],
"port": 9229
}
]
}
Is there a way to automatically stop or set breakpoint whenever there is an incoming request to that specific Nextjs Api Route?
For example, let's say I have an /api/data.tsx :
import { NextApiRequest, NextApiResponse } from 'next';
import { StatusCodes } from 'http-status-codes';
import getConfig from 'next/config';
export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
console.log('do some logging');
res.status(StatusCodes.OK).json({message: 'Good job buddy!'});
}
And want to stop on console.log on every incoming request. How can I do it?
I was having the same problem clicking on the sidebar in VSCode to place the red dots.
The good news is that there is still a way. In VSCode, rather than clicking to set the red dot on the line you want, just write debugger on that line instead. Not sure why it would work one way but not the other - maybe there is one more tweak that could make clicking to set dots actually work? So far this is as good as it gets for me with the api routes:
npm run dev
Now attach the debugger with the following launch.json. (My next.js project was in a subfolder of my workspace folder, so my own config needed to reflect that. The config below assumes the Next.js project root is the same as the $workspaceFolder.)
{
"name": "Attach",
"port": 9229,
"request": "attach",
"webRoot": "${workspaceFolder}", // mine had another subfolder here
"cwd": "${workspaceFolder}", // and here
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node"
},
Now in VSCode, wherever you want the breakpoint:
handler.get(async (req, res) => {
debugger;
console.log....
});
I know it might be too late to reply but it can be useful to others. I just followed what was specified here https://nextjs.org/docs/advanced-features/debugging and it worked fine. Copy the part relevant to debugging full stack and remember to change the directory if your code is in as subfolder, for example, this worked for me
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"cwd": "${workspaceFolder}/client",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}