FullStack debugging on your Next.js project. Make the breakpoints appropriately.

Fredric Cliver
2 min readFeb 5, 2023

To simultaneously make your breakpoint work on the front-end and back-end side, follow these steps.

Check your package.json and launch.json

Your package.json would be like this.

{
"repository": "",
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@vercel/examples-ui": "^1.0.4",
"next": "latest",
...
},
"devDependencies": {
...
}
}

You need a launch.json file. It locates as “/.vscode/launch.json”

{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "yarn dev"
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "yarn dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}

I’d used yarn as a package manager. You need to replace it with“npm run dev” or “pnpm dev”

Execute debugger and server.

On the debugger view, select the “Next.js: debug full stack” and press the “Start Debugging”

Now you have a new terminal that has the same name.

Run your server with the command ‘yarn dev’ (make it change as follow as your package manager) on the new terminal(“Next.js: debug full stack”)

If you had set the breakpoint on your front-end side, you would see that it works.

Like the front-end breakpoint, your back-end breakpoint is working without further action.

--

--

Fredric Cliver

Majored in Physics, self-taught and worked in the IT industry as a Dev/Design/Planning for 11 years. And I had run my Startup for 3 years. I fancy a ☔️ 🇬🇧