vscode-browser-preview 是唯一能替代外部浏览器并支持断点和 DevTools 的 VS Code 插件，需正确配置 Chrome/Edge 路径、launch.json 的 request 类型及 webRoot 才能正常启动和调试。
VS Code 内置的预览能力非常有限，Live Server 只能开一个默认浏览器窗口、不支持调试；而真正能替代外部浏览器、支持断点和 DevTools 的，只有 vscode-browser-preview —— 它不是“增强预览”，而是把 Headless Chromium 直接塞进编辑器里跑。
Browser Preview 插件安装后打不开？先查这三件事
常见错误是点击按钮没反应，或弹出 Failed to launch browser。这不是插件坏了，而是底层 Chromium 启动失败：
- 确认系统已安装 Chrome 或 Edge（仅支持 Chromium 内核，Firefox / Safari 不行）
- 检查设置里
browser-preview.chromeExecutable是否为空 —— 如果自动探测失败，必须手动填路径，比如 Windows 上是C:\Program Files\Google\Chrome\Application\chrome.exe - 打开 VS Code 的「输出」面板（
Ctrl+Shift+U），切换到「Browser Preview」频道，看是否有Failed to connect to Chrome或权限拒绝类报错
launch.json 里 type: "browser-preview" 配不生效？注意 request 类型
调试配置写对了但 F5 没反应，大概率是 request 值选错了。它只有两种合法值，不能混用：
-
"request": "launch"：用于首次启动预览并附加调试器，必须配url字段（如"http://localhost:3000"） -
"request": "attach"：用于连接已打开的预览窗口，此时不能带url，否则会报Cannot specify both url and request: attach - 如果项目用了 Webpack/Vite 等 dev server，建议优先用
launch，避免手动开窗口再 attach 的步骤
预览自动刷新但 JS 断点不命中？webRoot 是关键
断点灰掉、hover 显示 “unbound breakpoint”，问题几乎都出在源码映射上。即使你开了 sourceMap: true，VS Code 仍需知道从哪开始匹配文件路径：
- 在
launch.json的配置中必须显式声明"webRoot": "${workspaceFolder}" - 如果项目结构是
/src/main.js编译后输出到/dist/index.html，且index.html引用的是./main.js，那webRoot就得设成"${workspaceFolder}/dist"，否则路径对不上 - 不依赖
pathMapping或sourceMapPathOverrides的简单项目，webRoot设对就足够让断点正常工作
真正难调的不是装插件，而是 Chromium 启动参数、路径映射和调试协议之间的微妙配合。哪怕只漏掉一个 webRoot，断点就失效；Chrome 路径多一个空格，预览就起不来 —— 这些细节不报错，只静默失败。
