VSCode JavaScript调试依赖运行时环境，通过js-debug等扩展通信；需匹配版本、正确配置launch.json、启用sourceMap并验证路径映射。
VSCode 的 JavaScript 调试器本身不直接执行代码，它依赖运行时环境（如 Node.js 或浏览器）提供调试协议支持；你看到的“启动调试”实际是启动一个带调试能力的进程，并让 VSCode 通过 Debugger for Chrome、Node.js 或 js-debug 扩展与其通信。
确认调试扩展已启用且版本匹配
VSCode 1.70+ 自带 js-debug（由 Microsoft 维护），默认启用；旧版需手动安装同名扩展。禁用第三方调试器（如旧版 Debugger for Chrome）可避免端口冲突或断点失效。
- 打开命令面板（
Ctrl+Shift+P），输入Extensions: Show Installed Extensions，检查js-debug状态 - 若使用 Chrome 调试前端代码，确保 Chrome 版本 ≥ 92，且未启用
--remote-debugging-port=0这类随机端口参数 - Node.js 调试要求版本 ≥ 12.0 ——
node --version输出低于此值时，launch.json中的protocol必须设为legacy
正确配置 launch.json 启动项
调试行为完全由 .vscode/launch.json 中的配置决定；同一项目可能需要多个配置（如“调试 Node 脚本”和“调试浏览器页面”），但每次只能激活一个。
-
type字段必须是node、pwa-node、chrome或pwa-chrome—— 其中pwa-前缀表示使用新式js-debug协议 -
request为launch时，program必须指向可执行 JS 文件（如${workspaceFolder}/index.js）；为attach时，需提前用node --inspect-brk启动进程 - 前端调试若用
pwa-chrome，url字段不能省略（哪怕只是http://localhost:3000），否则会报Cannot connect to runtime process
断点不命中？先查源码映射与执行路径
常见于构建工具（Webpack/Vite）生成的 bundle 或 TypeScript 编译后代码：断点打在原始 .ts 或 .jsx 文件上，但运行的是转换后的 dist/main.js，此时必须靠 sourceMap 关联。
立即学习“Java免费学习笔记（深入）”；
- 确保构建时开启
devtool: 'source-map'（Webpack）或build.sourcemap: true（Vite） - 在
launch.json中添加"sourceMaps": true，并确认"outFiles"指向正确的输出目录（如["${workspaceFolder}/dist/**/*.js"]） - 打开调试控制台（
Debug Console面板），执行debugger语句可强制中断 —— 这能帮你验证调试通道是否连通，绕过断点识别问题
调试时变量显示 undefined 或无法展开
不是代码问题，而是 V8 引擎的优化行为：未被实际使用的变量可能被 JIT 编译器移除，导致调试器找不到其内存位置。
- 在可疑变量后加一行
console.log(variable)或variable.toString()，可阻止优化，使其在调试器中可见 - Node.js 启动时加
--no-opt参数（如"runtimeArgs": ["--no-opt"]）可禁用 V8 优化，但会显著降低执行速度 - Chrome 调试中右键变量 →
Store as global variable，生成临时temp1，便于后续交互式检查
真正卡住的地方往往不在配置语法，而在运行时环境与源码之间的映射关系是否被准确描述 —— sourceMap 路径错一位、outFiles 漏写 **、构建未触发 sourceMap 生成，都会让断点变成摆设。
