Skip to content

Instantly share code, notes, and snippets.

@pbarone
Last active April 14, 2025 19:17
Show Gist options
  • Select an option

  • Save pbarone/891ddfb4f8bd05e77e8e7338c2c4f42a to your computer and use it in GitHub Desktop.

Select an option

Save pbarone/891ddfb4f8bd05e77e8e7338c2c4f42a to your computer and use it in GitHub Desktop.
next.js 15 / VSCode debug - working launch.js and package.json

This works in Windows, with VSCode and next.js 15 and installs cross-env to pass an option to the DEV script

To execute:

  1. start VSDev debugging (Next.js: debug full stack)
  2. A chrome window will open

You should now be able to set breakpoints in both client and server components

{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug full stack",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/next/dist/bin/next",
"runtimeArgs": ["--inspect"],
"skipFiles": ["<node_internals>/**"],
"serverReadyAction": {
"action": "debugWithChrome",
"killOnServerStop": true,
"pattern": "- Local:.+(https?://.+)",
"uriFormat": "%s",
"webRoot": "${workspaceFolder}"
},
"cwd": "${workspaceFolder}"
}
]
}
{
"name": "myweatherwebapp-v2",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS=\"--inspect\" next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "15.2.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"cross-env": "^7.0.3",
"eslint": "^9",
"eslint-config-next": "15.2.4",
"tailwindcss": "^4",
"typescript": "^5"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment