vscode调试浏览器端javascript完全可行，需通过内置js-debug扩展配合launch配置启动；断点不生效主因是sourcemap路径错误、webroot配置不匹配或生产环境构建丢失映射；正确配置launch.json可自动启动chrome并命中src断点。
VSCode 调试浏览器端 JavaScript 完全可行，但必须通过 Debugger for Edge 或 Debugger for Chrome 扩展（现统一为 ms-vscode.js-debug）配合 launch 配置启动，直接 F5 不会自动打开浏览器或注入调试器。
为什么断点不生效？检查 js-debug 是否启用及 sourcemap 是否正确
VSCode 自 1.48 起内置 ms-vscode.js-debug，不再需要单独安装旧版 Chrome/Edge 调试器。但若断点显示为空心圆（未绑定），常见原因有：
-
sourceMap路径错误：确保构建工具（如 Webpack/Vite）输出的.map文件与 JS 同目录，且 JS 文件末尾有//# sourceMappingURL=xxx.js.map -
webRoot配置不匹配：在.vscode/launch.json中，webRoot必须指向浏览器实际加载资源的根路径（例如"${workspaceFolder}/dist"，而非src） - 使用了生产环境构建：Uglify/Terser 压缩后未保留
devtool: 'source-map'，导致映射丢失
如何配置 launch.json 启动 Chrome 并自动附加调试？
最简可用配置只需三要素：指定浏览器、入口 URL、静态资源根路径。不推荐用 attach 模式手动连接已打开的浏览器（易连错标签页）。
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/src",
"runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
注意：runtimeExecutable 在 Windows/Linux 上可省略（自动查找），macOS 若 Chrome 非默认安装路径则需显式指定；sourceMapPathOverrides 是解决 webpack 虚拟路径映射的关键，否则断点仍无法命中 src 文件。
调试时修改代码不刷新？别依赖 Live Server，改用 reload 或 HMR
VSCode 的调试器本身不提供热更新能力。若保存 JS 后页面无反应，不是调试配置问题，而是开发服务器未启用 HMR 或未监听文件变更：
- Vite 用户：默认开启 HMR，但需确保
import.meta.hot存在且未被构建移除 - Webpack 用户：确认
devServer.hot: true且插件HotModuleReplacementPlugin已启用 - 纯静态 HTML + JS：用 VSCode 插件
Live Server会与调试器冲突（两个服务占用不同端口），应关闭它，改用npm run dev启动的官方开发服务器
真正容易被忽略的是：断点位置必须落在浏览器实际执行的代码行上——比如异步回调、事件处理器、模块顶层代码中，而不能设在已被 tree-shaking 移除或条件编译跳过的分支里。调试前先在浏览器 DevTools 里确认该行确实执行了，再回 VSCode 对齐位置。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
