结论：vscode-browser-preview + Live Server 组合即可满足90%本地预览调试需求；需正确配置chromeExecutable路径、安装Chrome/Edge、授权权限，并区分二者用途——Live Server用于快速HTTP服务，vscode-browser-preview用于DevTools调试；调试需配合Debugger for Chrome及source-map。
直接说结论：不用装一堆插件，vscode-browser-preview + Live Server 组合就能覆盖 90% 的本地预览与调试需求。其他插件要么功能重叠，要么在真实项目中反而引入路径、端口或 CORS 冲突。
vscode-browser-preview 启动失败常见原因
多数人卡在“点开没反应”或“报错找不到 Chrome”。根本不是插件问题，而是 Chromium 进程启动条件没满足：
-
browser-preview.chromeExecutable路径配置错误 —— Windows 默认是C:\Program Files\Google\Chrome\Application\chrome.exe，Mac 是/Applications/Google Chrome.app/Contents/MacOS/Google Chrome，Linux 通常为/usr/bin/google-chrome；路径里不能有空格或中文，否则必须用双引号包裹（VS Code 设置里支持） - 系统没装 Chrome 或 Edge ——
vscode-browser-preview依赖本地 Chromium 实例，不自带浏览器内核；Edge 也能用，但需手动指定browser-preview.chromeExecutable指向 Edge 的可执行文件 - 权限被拦截 —— macOS / Linux 下首次运行可能被系统阻止，需在「系统设置 > 隐私与安全性」里允许终端或 VS Code 运行下载的软件
Live Server 和 vscode-browser-preview 到底谁该当主力
别混用它们的启动逻辑：Live Server 是起一个本地 HTTP 服务（http://localhost:5500），适合静态文件开发；vscode-browser-preview 是直接加载文件协议（file:///）或任意 URL，适合调试远程页面、iframe 嵌套、或需要 DevTools 完整能力的场景。
- 本地 HTML/CSS/JS 快速验证 → 用
Live Server，右键Open with Live Server，自动开http://localhost:5500，改保存即刷新 - 要打断点、看 network、模拟设备尺寸、查 localStorage → 用
vscode-browser-preview，命令面板运行Browser Preview: Open Preview，再把地址栏改成http://localhost:5500（和 Live Server 端口一致） - 绝对不要让
vscode-browser-preview直接打开file:///路径下的 HTML —— 多数现代 JS 框架（Vue/React）依赖模块解析，file://协议下会触发 CORS 或import失败
调试时控制台空白或断点不命中
这不是插件 bug，而是调试上下文没对齐。关键点在于：VS Code 的调试器必须连接到正在运行的 Chromium 实例，而 vscode-browser-preview 默认不开启调试通道。
- 确认已安装官方
Debugger for Chrome插件（注意不是“Debugger for Edge”，它不兼容） - 在
.vscode/launch.json中添加配置，type必须是chrome，且url要和预览窗口当前地址完全一致（包括端口、斜杠结尾） - 启动调试前，先确保
vscode-browser-preview窗口已打开并加载目标页面；调试器不会帮你打开新页，只 attach 到已有 tab - 如果用了 Webpack/Vite，确保构建产物开启了
devtool: 'source-map'，否则断点只会打在 bundle 文件上
真正容易被忽略的是：两个插件都依赖你本地的 Chrome 版本。Chrome 127+ 对 file:// 协议做了更严格的隔离，vscode-browser-preview 的 file:// 加载方式在某些安全策略下会静默失败 —— 这时候别折腾插件设置，直接切到 Live Server 启的服务地址就行。
