断点不生效需先确认Chrome处于可调试状态：必须通过命令行加--remote-debugging-port=9222和--user-data-dir参数启动独立实例；launch.json中url、webRoot、sourceMapPathOverrides三者路径必须与实际项目结构严格匹配。
断点不生效？先确认 Chrome 是不是“可调试状态”
VS Code 本身不控制浏览器，它靠 Chrome 开放的 --remote-debugging-port 端口通信。双击图标启动的 Chrome 默认不开启这个端口，所以你点 F5 后大概率看到：Unable to launch browser: "Could not connect to localhost:9222"。
- Windows：右键 Chrome 快捷方式 → 属性 → 在“目标”末尾加空格再加
--remote-debugging-port=9222 --user-data-dir=C: empchrome-debug - macOS：终端运行
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug - Linux：终端运行
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
--user-data-dir 不是可选项——它强制 Chrome 启一个干净的独立实例，避免和你日常浏览冲突；漏掉它，调试可能失败或覆盖你的登录态。
launch.json 配置里最常写错的三个字段
生成的 .vscode/launch.json 看似简单，但只要 url、webRoot、sourceMapPathOverrides 中有一个没对齐项目实际运行路径，断点就变空心圆（未绑定）。
-
url：必须是你真正在浏览器地址栏里打开的地址。静态 HTML 文件用file:///协议；Vite 项目填http://localhost:5173；Webpack Dev Server 填http://localhost:8080。别照抄网上的http://localhost:3000。 -
webRoot：指向你编辑的源码目录，不是打包后的dist或build。比如 React 项目，它应该是"${workspaceFolder}/src"，而不是"${workspaceFolder}"。 -
sourceMapPathOverrides：Webpack/Vite 生成的 sourcemap 里sources字段路径往往带前缀（如webpack:///./src/main.js），不映射就找不到源文件。常见写法："webpack:///./src/*": "${webRoot}/src/*"。
Chrome 调试 vs Edge 调试：选哪个更省事？
VS Code 1.80+ 已原生支持 Edge，不用装扩展；而 Chrome 需要 Debugger for Chrome（现在叫 JavaScript Debugger，通常已预装）。两者协议一致，但配置细节不同。
- Edge：配置中设
"type": "pwa-msedge"，并指定runtimeExecutable路径，例如 macOS 上是/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge；Windows 上可能是C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe。 - Chrome：用
"type": "pwa-chrome"，且必须确保你手动启动的 Chrome 实例端口和launch.json中的port（默认 9222）完全一致。 - Firefox：需额外在
about:config里设devtools.debugger.remote-enabled = true，且扩展必须是官方Debugger for Firefox，发布者为firefox-devtools。
想调试已经打开的页面？用 attach 模式，别 launch
如果你已经在 Chrome 里打开了 http://localhost:3000，又不想关掉重开，那就别用 "request": "launch"，改用 "request": "attach" —— 它让 VS Code 去“连上”已运行的调试实例。
- 确保 Chrome 是用
--remote-debugging-port=9222启动的（不管是不是你启动的） - 配置示例：
{ "name": "Attach to Chrome", "type": "pwa-chrome", "request": "attach", "port": 9222, "webRoot": "${workspaceFolder}" } - 注意：
attach模式下url字段无效，VS Code 只认当前标签页 URL；如果页面 URL 和你源码结构不匹配，断点仍会失效。
很多人卡在“为什么 attach 不进”，其实只是 Chrome 启动时没带参数，或者端口被其他进程占了——查一下 lsof -i :9222（macOS/Linux）或 netstat -ano | findstr :9222（Windows）就能定位。
