VSCode 1.70+ 默认支持 JS/TS 调试无需 launch.json:纯 Node 脚本按 F5 即可;TS 需 tsconfig.json 启用 sourceMap;仅在 ts-node/jest/webpack 等非标场景才需手动配置。

VSCode 的 JavaScript/TypeScript 调试器默认就能用,不需要额外安装插件或配置 launch.json —— 但前提是项目结构和运行环境符合预期,否则会卡在“找不到源码”“断点不命中”“无法进入 node_modules”这类问题上。
为什么 launch.json 经常是多余的?
VSCode 1.70+ 对 JS/TS 的调试支持已深度集成:打开一个 .js 或 .ts 文件,按 F5,它会自动识别运行时(Node.js)、推断入口、生成临时配置。只有当自动检测失败(比如你用 ts-node、jest、webpack serve 或自定义构建流程)时,才需要手动写 launch.json。
- 纯 Node.js 脚本(如
index.js):直接 F5 即可启动调试,VSCode 自动调用node --inspect-brk - TypeScript 源码:必须有
tsconfig.json且启用"sourceMap": true,否则断点只停在编译后的.js上 - 如果看到 “No configuration” 提示,点 “Cancel”,再点右上角绿色 ▶️ 图标 → “Run and Debug”,选择 “Node.js (preview)” 更可靠
什么时候必须写 launch.json?
常见于以下场景:启动带参数的 CLI、调试 Jest 测试、附加到已运行的 Node 进程、或使用非标准入口(如 dist/index.js 但源码在 src/)。
- 调试 Jest:配置
type: "node"+runtimeExecutable: "npx"+args: ["jest", "--runInBand", "--no-cache"] - 附加到进程:用
type: "node"+request: "attach"+port: 9229,并确保目标进程已用node --inspect=9229启动 - 调试 TypeScript 源码但输出目录不是默认
outDir:需显式设置outFiles(如["./dist/**/*.js"])和sourceMaps
断点不命中?先检查这三件事
这是最常被忽略的底层原因,跟配置关系不大,而是环境与映射是否对齐:
立即学习“Java免费学习笔记(深入)”;
- 确认
tsconfig.json中"sourceMap": true和"inlineSources": true(后者让 source map 包含原始代码,避免找不到.ts文件) - 确认运行命令实际用了 source map:比如用
ts-node --project tsconfig.json index.ts,而不是直接跑编译后的node dist/index.js(除非你明确配置了outFiles) - 检查 VSCode 左下角状态栏是否显示 “No debug adapters installed” 或 “Source maps not found” —— 前者说明没装官方
ms-vscode.js-debug(新版已内置),后者说明路径映射失败,可临时加"resolveSourceMapLocations": ["**/*"]
调试 Web 页面时为什么看不到 .ts 源码?
浏览器 DevTools 能直接调试 TS,但 VSCode 的调试器要介入,得靠 chrome 类型配置 + 正确的 webRoot 和 sourceMapPathOverrides。
- 必须用
type: "pwa-chrome"(旧版chrome类型已弃用) -
webRoot指向你本地开发服务器的根目录(如"${workspaceFolder}/public"),不是打包后产物目录 - 若用 Vite/Vue/React,常需
sourceMapPathOverrides修复路径别名,例如:"webpack:///src/*": "${webRoot}/src/*" - 确保开发服务器开启了 source map(Vite 默认开,Create React App 需确认
GENERATE_SOURCEMAP=true)
真正卡住的地方往往不在配置本身,而在于 source map 是否生成、是否被正确加载、以及 VSCode 是否信任该映射路径 —— 尤其当项目用了 monorepo、pnpm workspace 或自定义别名时,sourceMapPathOverrides 几乎必调。










