webpack devserver 调试需配置 devtool 为 "source-map"，vscode launch.json 使用 type: "pwa-chrome"，webroot 指向项目根目录，并禁用浏览器缓存以避免断点失效。
Webpack DevServer 启动后 VSCode 连不上？先确认它是否开了 sourcemap
VSCode 调试依赖源码映射，Webpack DevServer 默认不生成 source-map（尤其在 mode: "development" 下也只用 eval 类型，不落地），断点会直接失效。
-
devtool必须设为"source-map"或"inline-source-map"（推荐前者，更稳定） - 如果用
webpack-dev-serverCLI 启动，需加--devtool source-map参数；若用配置对象，则写进devtool: "source-map" - 注意：设成
"eval-source-map"在某些 Chrome 版本或远程调试场景下断点会偏移，不是 bug，是 eval 模式固有限制
launch.json 里用 chrome 还是 pwa-chrome？选后者
旧版 chrome 调试器已弃用，VSCode 1.80+ 默认停用；用错会导致“无法连接到 localhost:9222”或“target not found”错误。
- 必须用
type: "pwa-chrome"（不是chrome） -
url填 Webpack DevServer 实际地址，比如"http://localhost:8080"，别填file://路径 - 如果 DevServer 开了 HTTPS 或自定义 host，
url和webRoot要严格匹配，否则断点加载失败
断点打在 .ts 或 .jsx 文件里没反应？检查 webRoot 和路径映射
VSCode 不知道你源码在哪，它靠 webRoot 去匹配浏览器发来的 sourcemap 中的 sources 字段。路径对不上，断点就“灰掉”。
-
webRoot应指向你项目根目录（即webpack.config.js所在位置），不是dist或src - 如果用 monorepo 或 workspace，确保
sources路径没带多余前缀（如webpack:///./src/...），必要时在sourceMapPathOverrides里做映射 - 常见坑：
output.path设为绝对路径（如/Users/name/project/dist）会导致 sourcemap 里的路径和本地不一致，统一用相对路径
修改代码后断点失效、跳转错行？别忽略 HMR 和缓存叠加影响
HMR 替换模块时，Chrome 可能没及时更新 sourcemap 缓存，VSCode 就找不到新位置，表现为断点漂移或跳到空行。
- 改完代码后，手动刷新页面（
Cmd+R/Ctrl+R），不要只靠 HMR 热替换 - 在 Chrome DevTools 的
Sources面板里按Cmd+Shift+P输入 “Disable cache”，勾上它 - VSCode 中按
Cmd+Shift+P> “Debug: Restart Session”，比关掉再启更快，且保留当前断点状态
真正卡住的地方往往不是配置本身，而是 sourcemap 生成路径、浏览器缓存、VSCode 调试会话生命周期这三者没对齐——调一次不通，就逐个验证这三个点。
