断点不触发的根本原因是debugger for chrome无法自动识别构建产物与源码间的映射关系；必须显式配置webroot、sourcemappathoverrides，启用sourcemap，并通过http服务（如live server或dev server）运行页面，否则因跨域或路径错位导致断点失效。
Debugger for Chrome 是目前最成熟、兼容性最强的 JS 调试方案，但直接装插件不配置 launch.json 基本等于没用——断点不会命中，sourceMap 也常失效。
为什么 Debugger for Chrome 的断点经常不触发？
根本原因在于它默认不识别构建产物（如 webpack 打包后的 dist/main.js）与源码（src/index.ts）之间的映射关系。没有正确配置 sourceMapPathOverrides 或 webRoot，VSCode 就无法把你在源码里打的断点，精准“翻译”到浏览器实际执行的代码位置。
- 常见错误现象：
Uncaught SyntaxError: Unexpected token 'export'或断点变成空心圆（未绑定） - 关键配置项必须显式声明：
webRoot指向本地静态资源根目录（通常是"${workspaceFolder}"） -
sourceMapPathOverrides要匹配构建工具输出的sources字段，例如 webpack 默认是"webpack:///./src/*": "${workspaceFolder}/src/*" - 若用 Vite，需确认
build.sourcemap设为true，且 dev server 运行在http://localhost:5173这类标准端口
如何让调试支持 TypeScript + sourceMap + 条件断点？
原生 JavaScript Debugger（VSCode 内置，2023 年后已取代旧版 Debugger for Chrome）才是当前推荐方案，它对 TS 和 modern 构建工具开箱即用，且无需额外插件。
- 确保项目有
tsconfig.json，且sourceMap和inlineSources均设为true - 运行时需启用
debug.javascript.usePreview（设为false可回退到经典调试界面，稳定性更高） - 条件断点直接右键断点 → “Edit Breakpoint” → 输入表达式，比如
user.id === 123，不用写if包裹 - 调试时按
F9打断点，F5启动，F10/F11单步，变量 hover 查看值，比 console.log 快 5 倍以上
哪些场景下必须搭配 Live Server 或 webpack-dev-server？
纯 HTML 文件双击打开，或用 file:// 协议访问时，Debugger 会因跨域限制拒绝加载 sourceMap——这是硬性限制，不是配置问题。
- 必须用本地 HTTP 服务：Live Server 插件点右键 → “Open with Live Server”，端口默认
5500 - React/Vue 项目务必走 dev server：启动
npm run dev后，在launch.json中url改为"http://localhost:3000"（或对应端口） - 注意
devtool配置：webpack 推荐用"source-map"（而非"eval-source-map"），后者在 Debugger 中常无法定位源码行 - 如果页面加载后立即报错，可在
launch.json加"smartStep": true，跳过库代码，直接停在你的业务逻辑里
真正卡住调试深度的，往往不是插件选错，而是 sourceMap 路径映射没对上、HTTP 服务没跑起来、或者 TS 编译选项漏了 inlineSources。这三处任意一个出问题，断点就成摆设。
