VSCode调试JavaScript断点不触发，主因是未正确连接运行时（Chrome/Node.js）或source map未生效；需确认调试配置、启动参数、源码映射及目标环境。
VSCode 调试 JavaScript 时，断点不触发？先确认运行环境
vscode 本身不执行 js，它依赖外部运行时（如 chrome 浏览器、node.js）来实际执行代码并回传调试信息。断点不生效，90% 是因为没连上正确的运行时——比如你在写浏览器端代码，却用 node 启动调试；或用了 launch 模式但页面根本没通过 vscode 启动的 chrome 打开。
实操建议：
- 浏览器端：用
chrome或ms-edge的调试配置，确保url指向本地服务（如http://localhost:3000），且该页面由 VSCode 自动打开（launch）或已手动在对应浏览器中打开并启用远程调试（attach） - Node.js 端：启动命令需加
--inspect参数（如node --inspect index.js），VSCode 配置中port必须与之匹配（默认9229） - 检查 VSCode 左下角状态栏是否显示「正在调试」及对应环境名（如「Chrome」或「Node.js」），没显示说明未连接成功
在 JS 文件里设置断点，但代码是打包后的？必须映射源码
React/Vue 项目通常用 Webpack/Vite 构建，生成的 bundle.js 和你编辑的 src/App.js 完全不是一回事。直接在构建产物里打点无效，必须靠 source map 关联原始文件。
实操建议：
- 确保构建工具开启了 source map：Webpack 中设
devtool: 'source-map'或'inline-source-map'；Vite 默认开发模式已启用，但生产构建会关闭，调试时别用build后的 dist - 在
.vscode/launch.json中，对浏览器调试添加"sourceMapPathOverrides"（尤其当路径映射异常时），例如："sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*" } - 断点只能打在原始
.js或.ts文件上，VSCode 会自动跳转到对应 bundle 位置；如果断点变成空心圆（灰色），说明 source map 未加载或路径不匹配
调试时变量显示 undefined 或值不对？注意作用域和求值时机
断点停住后，在「变量」面板看到的值，是当前执行位置的词法作用域快照。JS 异步、闭包、编译优化都可能让变量看起来“消失”或“错位”。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 不要依赖「自动展开」的变量树——有些对象属性是 getter，展开时才执行，可能改变状态；右键变量选「复制值」再粘贴到「调试控制台」里用
console.log()验证 - 异步回调里的断点，
this或外层变量可能被绑定丢失，优先用debugger语句配合console.log输出关键值，比单靠面板更可靠 - 开启
skipFiles避免跳进node_modules或 polyfill：在launch.json加"skipFiles": [ "
/**", "**/node_modules/**" ]
debugger 语句和 VSCode 断点混用时，哪个优先？
debugger 是 JS 标准语句，只要运行时启用了调试器（如 Chrome 开着 DevTools 或 VSCode 正在调试），就会强制中断。它和 VSCode 界面打的断点是同一机制，无优先级之分，但行为有差异。
实操建议：
-
debugger在代码里硬编码，适合临时定位某次调用；VSCode 断点可开关、条件触发、复用，适合反复调试 - 两者同时存在时，执行顺序按代码流走：先遇到
debugger就停，之后再走到 VSCode 断点位置还会再停一次 - 部署前务必删掉
debugger，否则用户打开 DevTools 就卡住；VSCode 断点则完全不影响运行
