答案是必须安装debugger for chrome插件并正确配置launch.json文件。需设置type为pwa-chrome，url指向真实运行的http地址（如http://localhost:3000），webroot精确匹配源码目录（如${workspacefolder}/src），启用sourcemaps，并确保sourcemappathoverrides正确映射路径。
VSCode 默认不带浏览器调试能力，必须装插件 + 手动配 launch.json 才能真正断点调试 JavaScript，光靠“打开网页”不算调试。
为什么装了 Debugger for Chrome 还不能断点？
因为插件只是“桥梁”，真正触发调试的是 launch.json 里的配置。没这个文件，或者配置里漏了 url、webRoot，VSCode 就不知道该连哪个页面、源码映射到哪。
-
url必须指向一个真实运行的地址（如http://localhost:3000），不能是本地file://路径 -
webRoot要精确匹配你源码所在目录，比如 React 项目常用"${workspaceFolder}/src"，写成"${workspaceFolder}"就可能找不到断点 - 如果用 Webpack/Vite 打包，
sourceMapPathOverrides很关键，否则断点会打在 bundle.js 上而不是 .ts/.jsx 文件里
launch.json 中 type 字段选 pwa-chrome 还是 chrome？
选 pwa-chrome。旧版插件用 chrome，但自 VSCode 1.50+ 起，官方调试器已统一为 PWA（Progressive Web App）协议，chrome 类型已被弃用，强行使用会导致调试启动失败或断点不命中。
- 对应 Edge 用
pwa-msedge - Firefox 需额外安装
Debugger for Firefox插件，type 设为firefox - 所有 PWA 类型都支持
breakOnLoad、sourceMaps等现代调试特性
Live Server 插件和调试是两回事
很多人误以为装了 Live Server 就能调试，其实它只起一个本地 HTTP 服务作用，和断点调试无关。没有 launch.json 配置，VSCode 根本不会尝试连接浏览器 DevTools。
- Live Server 启动后，记下它实际使用的端口（比如
http://127.0.0.1:5500），然后填进launch.json的url - 别把
url写成http://localhost:5500却用 Live Server 默认的127.0.0.1—— 浏览器同源策略会拦截 - React/Vue CLI 项目自带 dev server（如
npm start），这时url应填http://localhost:3000，不是 Live Server 的端口
调试已打开的页面（attach 模式）怎么配？
适用于想调试生产环境页面、或已手动打开的开发页，不用重启浏览器。前提是 Chrome 必须以远程调试模式启动：
- Windows/macOS 命令行启动 Chrome：
chrome --remote-debugging-port=9222 -
launch.json配置中request改为attach，port设为9222 -
webRoot仍要设对，否则源码无法映射；url可省略或留空 - 注意：Chrome 启动时若已有普通实例在运行，新窗口不会自动连接，得关掉所有 Chrome 进程再试
最容易被忽略的是 webRoot 和实际文件路径的偏差——哪怕只差一层 src 目录，断点就会静默失效；还有人把 url 写成相对路径或本地 file 协议，结果调试器连请求都发不出去。
