vs code 1.47+ 内置 vscode-js-debug,无需安装 debugger for chrome/edge 等旧插件,避免冲突;调试时应使用 "pwa-node"、"pwa-chrome" 等 type 值,并确保 sourcemap 正确配置以支持 ts 源码级调试。

vscode-js-debug 是唯一需要的调试插件
VS Code 1.47+ 已内置 vscode-js-debug,它直接接管所有 JavaScript/TypeScript 调试行为——包括 Node.js、Chrome、Edge、WebView 等场景。你不需要、也不应该再安装 Debugger for Chrome 或 Debugger for Edge 这类旧扩展,它们会与内置调试器冲突,导致断点灰色、Cannot connect to the target: connect ECONNREFUSED 等错误。
验证是否启用内置调试器:按 Ctrl+Shift+P(macOS 是 Cmd+Shift+P),输入 Debug: Toggle Auto Attach,如果命令存在且可执行,说明 vscode-js-debug 正在运行。若仍看到旧扩展残留,手动删除 ~/.vscode/extensions/msjsdiag.debugger-for-chrome-* 目录(Windows 对应 %USERPROFILE%\.vscode\extensions\)。
launch.json 中 type 字段决定调试协议和运行时
type 不是“选浏览器”,而是声明你要连接哪种调试协议实现:
-
"type": "pwa-node":调试本地 Node.js 进程(推荐替代旧"node") -
"type": "pwa-chrome":通过 CDP(Chrome DevTools Protocol)连接 Chrome/Edge 实例(推荐替代旧"chrome") -
"type": "pwa-msedge":同上,但明确指向 Edge
关键区别在于:pwa- 前缀表示使用现代 js-debug 协议,支持更稳定的 source map 映射、异步栈追踪和自动端口发现。旧 "chrome" 类型在 VS Code 1.80+ 中虽仍兼容,但遇到 url 缺失或 webRoot 错配时更容易静默失败。
debugger 语句 + Auto Attach 是最轻量的交互式入口
不写 launch.json 也能立刻开始调试,尤其适合临时跑一段脚本、LeetCode 题解或快速验证逻辑:
详细的 Three.js 3D 图形参考,涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 在 JS 文件中插入
debugger;(确保该行会被执行) - 打开命令面板,运行
Debug: Toggle Auto Attach→ 选择Only With Debugger Statement - 终端里执行
node index.js或npx ts-node src/main.ts
VS Code 会捕获进程并停在 debugger 处。注意:Auto Attach 是全局开关,调试完务必关掉,否则后续所有 node 命令都会被拦截。
sourceMap 映射失效时 debug 控制台是第一检查点
断点打在 .ts/.jsx 上却没停?别急着改 launch.json,先打开 Debug Console 面板,手动执行 debugger —— 如果能中断,说明调试通道通了,问题出在 source map 关联上。
常见映射失败原因:
- Webpack/Vite 构建未开启 sourcemap:
devtool: 'source-map'或build.sourcemap: true -
launch.json中"outFiles"指向错误目录,比如写成["./dist/**/*.js"]但实际输出在./build/ - TS 编译后路径含
../回退,需在tsconfig.json中设"outDir"和"sourceRoot"一致
真正容易被忽略的是:Vite 默认开发服务器(vite dev)生成的 sourcemap 是内联的,无需额外配置 outFiles;但生产构建(vite build)必须显式设置 "sourceMaps": true 并校验 outFiles 路径。










