How to debug Next.js in Visual Studio Codespaces in the browser

I was trying to do this and couldn’t find explicit instructions anywhere on the web. Turns out it is easy but you need to read the instructions and then do things in the right order.

1. Set up Next.js debugging

Advanced Features: Debugging | Next.js

Follow the instructions given.

• Modify your package.json to run node in debug mode.

"dev": "NODE_OPTIONS='--inspect' next dev"

• Modify your .vscode/launch.json to attach the VS Code inspector to our running debugger

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

2. Debug

In order to debug you need to start Visual Studio Codespaces in the browser and load your project.

The key seems to be to do this in the right order, its no good doing all the right steps but not necessarily in the right order.

Set Breakpoints

Set your breakpoints as you wish, whenever you want.

Launch Debugger

From Visual Studio Codespaces selecting ‘Launch Program’ for the right project.

Launch Next Dev Server

From a bash shell, not a JavaScript Debug Terminal, run Next in dev mode:

yarn dev

Open Next Website

Open http://localhost:3000 from the browser tab running Visual Studio Codespaces.

Enjoy Debugging

Run the application the browser will now intercept the code and stop on breakpoints.

Occasionally Asked Questions

Does this work with in a workspace?

Yes, works in multiple project workspaces just make sure you launch the right debugger and run ‘yarn dev’ in the right folder.