Live Server适合纯静态HTML/CSS/JS实时刷新，vscode-browser-preview支持DevTools断点调试和设备模拟；前者开箱即用，后者需正确配置Chrome路径且不兼容Live Server的调试通道。
VSCode 里浏览器预览不是“装了就能用”，关键在选对插件、配对路径、避开默认行为陷阱。
Live Server 和 vscode-browser-preview 到底该用哪个？
两者定位完全不同，混用反而增加调试负担：
-
Live Server是轻量级本地服务器 + 自动刷新，适合纯静态 HTML/CSS/JS 开发，启动快、无依赖，但不支持断点调试 -
vscode-browser-preview是嵌入式 Headless Chromium 实例，能直接在编辑器内开真实浏览器窗口，支持 DevTools、断点、设备模拟，但需 Chrome/Edge 可执行文件路径正确 - 如果你只改样式或结构，
Live Server足够；如果要调试 JS 执行流、检查 DOM 动态变化、测响应式布局，必须上vscode-browser-preview - 别试图让
Live Server配合Debugger for Chrome——它不提供 WebSocket 调试通道，断点会失效
vscode-browser-preview 启动失败的三个高频原因
报错 Failed to launch browser: ENOENT 或预览窗口一闪即逝，基本锁定在这三处：
- Chrome 没装，或装了但不在系统 PATH 里：Windows 默认路径是
C:\Program Files\Google\Chrome\Application\chrome.exe，macOS 是/Applications/Google Chrome.app/Contents/MacOS/Google Chrome，Linux 是/usr/bin/google-chrome；路径不对就手动填进设置项browser-preview.chromeExecutable - 权限问题：macOS 上首次运行可能被系统拦截，需去「系统设置 > 隐私与安全性 > 完全磁盘访问」中给 VSCode 授权
- 工作区配置冲突：如果项目根目录有
.vscode/settings.json且写了"browser-preview.chromeExecutable": ""（空字符串），插件会优先读这个，覆盖全局设置
Live Server 怎么强制用 Chrome 而不是系统默认浏览器？
它不走系统默认浏览器逻辑，而是靠 liveServer.settings.CustomBrowser 控制：
- 打开 VSCode 设置（
Ctrl+,），搜索live server custom browser - 在
Live Server › Settings: Custom Browser中填入chrome（小写，不能写Chrome或Google Chrome） - 如果 Chrome 不在标准路径，还需同时设
liveServer.settings.CustomBrowserPath，值为 Chrome 可执行文件完整路径 - 注意：这个设置只影响 Live Server 启动时的浏览器选择，不影响右键菜单里的“Open in Default Browser”选项
多窗口预览时 CSS 修改不生效？先查这个配置
vscode-browser-preview 的 BrowserViewWindowManager 默认启用缓存策略，改完 CSS 文件后可能仍显示旧版本：
- 检查设置项
browser-preview.disableCache是否为true；默认是false，必须手动开启 - 如果用了 Webpack/Vite 等构建工具，确保它们没把 CSS 注入到内存中——
vscode-browser-preview只读取磁盘文件，不监听 HMR 事件 - 多窗口下每个窗口独立加载资源，修改 CSS 后需手动触发对应窗口的刷新（快捷键
Ctrl+R），不会自动同步到其他已开窗口
真正卡住人的往往不是功能缺失，而是插件之间默认行为的叠加效应——比如 Live Server 的端口占用和 vscode-browser-preview 的 Chrome 进程复用机制冲突，会导致第二个预览窗口打不开。这类问题得看输出面板里 Browser Preview 和 LiveServer 两个频道的日志，而不是只盯着界面反应。
