Chrome DevTools 和 VSCode 断点失效主因是 sourcemap 未生成或路径错误：需确认构建工具（Webpack/Vite/TS等）开启 sourcemap、输出 .map 文件、JS 中 sourceMappingURL 可访问，且 VSCode 的 outFiles 精确匹配编译后 JS 路径。
Chrome DevTools 调试不了，VSCode 断点全灰？先确认 sourcemap 是否真被加载
断点变空心、无法停住、调试图标显示“未连接到源”，大概率不是 VSCode 配置错，而是 sourceMap 根本没生成或路径不对。TypeScript 编译、Webpack、Vite、esbuild 等工具都得显式开启 sourcemap 且输出正确路径，否则 VSCode 的 launch.json 再准也白搭。
- 检查编译产物目录下是否存在
.map文件（如index.js.map），没有就说明构建没开 sourcemap - 打开生成的
.js文件，末尾是否有一行//# sourceMappingURL=index.js.map？路径必须可访问（本地文件系统路径或相对路径） - Webpack 用户注意：
devtool: 'source-map'和'inline-source-map'效果不同——后者把 map 内联进 JS，VSCode 支持好；前者需确保.map文件与 JS 同目录或路径可解析 - Vite 默认开发环境已启用 sourcemap，但生产构建（
vite build）默认关闭，需在vite.config.ts中配build.sourcemap: true
VSCode launch.json 中的 sourceMaps 和 outFiles 怎么填才不踩坑
sourceMaps: true 是开关，不是万能钥匙；真正决定“JS 映射到哪去”的是 outFiles（或 resolveSourceMapLocations）。填错会导致 VSCode 找不到 TS/源码位置，断点永远无效。
-
outFiles必须指向编译后的 JS 文件路径，不是源码路径——例如你的 TS 在src/，编译到dist/，那就填["${workspaceFolder}/dist/**/*.js"] - 如果用了多入口或复杂输出结构（如
dist/es/index.js+dist/cjs/index.js），outFiles要覆盖所有 JS 输出位置，漏一个就可能断点失效 - TypeScript 用户：确保
tsconfig.json中sourceMap: true且outDir与outFiles一致；若用composite: true或引用项目，还需检查rootDir和路径别名是否干扰映射 - Node.js 调试时，若用
ts-node，不用配outFiles，改用runtimeArgs: ["-r", "ts-node/register"]并关掉sourceMaps——它走的是运行时编译，不是静态 map
调试时看到变量是 undefined 或显示原始 JS 变量名（如 _a）？检查 sourcemap 内容完整性
sourcemap 不只是“让断点生效”，还负责变量名还原和作用域映射。如果调试时看不到原始参数名、this 指向混乱、或者 hover 提示全是 undefined，很可能是 sourcemap 生成质量不足。
- Webpack 用户避免用
devtool: 'eval'或'cheap-module-eval-source-map'——它们生成的 map 不含变量名信息，仅支持断点，不支持变量调试 - TypeScript 编译推荐用
sourceMap: true+inlineSources: true（把源码嵌进 map），这样即使 JS 文件丢失，VSCode 也能还原逻辑 - 使用 Babel？确认
@babel/preset-env没开启modules: false导致路径解析失败；同时检查sourceMaps: 'both'（生成 .map + 内联） - 用 esbuild？默认
sourcemap: true不包含源码内容，加sourcemap: 'inline'或配合sourcesContent: true才能完整调试
前端项目 F5 启动后断点有效，但刷新页面就失效？留意浏览器缓存和 sourcemap 加载时机
这不是 VSCode 的 bug，而是浏览器加载 JS 时没拿到或拒绝了 sourcemap。尤其在 webpack-dev-server、Vite dev server 等场景下，sourcemap 可能被缓存、路径 404、或 Content-Type 错误拦截。
- 打开 Chrome DevTools → Network → 刷一次页面 → 找对应
.js.map请求，看状态码是不是 200；404 表示路径错，406/415 表示服务器返回了错误 MIME 类型（应为application/json） - Webpack/Vite 开发服务器默认支持 sourcemap，但如果你加了自定义中间件或代理，可能拦截了
.map请求，需显式放行 - VSCode 调试器启动后会自动请求 sourcemap，但如果页面已加载完 JS，再启调试器就可能错过——建议始终用 VSCode 的 “Launch Browser” 方式启动，而非手动开浏览器
- 某些 CDN 或 Nginx 配置会默认禁止
.map文件访问，上线前务必验证https://yoursite.com/app.js.map可直连
最麻烦的情况是 sourcemap 引用路径为绝对 URL（如 https://cdn.example.com/app.js.map），而你本地开发时根本没部署那个地址——这时候必须改构建配置，让 sourceMappingURL 指向相对路径或本地可解析路径。
