一句话:前端用 浏览器 launch + webRoot;Nest 用 Node launch program。
Vue / Vite 项目
vite.config 确保 sourcemap:
javascript
export default defineConfig({
build: { sourcemap: true },
});
.vscode/launch.json:
json
{
"version": "0.2.0",
"configurations": [{
"type": "chrome",
"request": "launch",
"name": "Vue Dev",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/src"
}]
}
在源码写 debugger 或浏览器/DevTools 打断点。未打开的页面断点不会命中。
Nuxt 3
typescript
// nuxt.config.ts — 开发环境
export default defineNuxtConfig({
sourcemap: { server: true, client: true },
});
- 客户端:同上 Chrome launch,
url改为http://localhost:5050 - 服务端:Node attach 到 Nitro 进程(或
npm run dev终端里debugger+--inspect)
NestJS(blog-server)
json
{
"type": "node",
"request": "launch",
"name": "Nest Debug",
"runtimeArgs": ["--nolazy", "-r", "ts-node/register", "-r", "tsconfig-paths/register"],
"args": ["${workspaceFolder}/src/main.ts"],
"cwd": "${workspaceFolder}",
"skipFiles": ["<node_internals>/**"]
}
或使用 Nest CLI:
json
{
"type": "node",
"request": "launch",
"name": "Nest npm",
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "start:debug"],
"console": "integratedTerminal"
}
小结
| 栈 | 方式 |
|---|---|
| Vue/Vite | Chrome + webRoot |
| Nuxt | client Chrome + server inspect |
| Nest | Node launch / start:debug |


全部评论(0)