Live Server 是最轻量的自动预览方案，保存即刷新，起本地 HTTP 服务（如 http://localhost:5500），仅适用于纯静态文件；常见错误是双击 HTML 导致 file:// 协议跨域；不支持断点调试和打包项目。
Live Server 是最轻量的自动预览方案
改完 HTML/CSS/JS 文件一保存就刷新，不用点任何按钮，也不用配 URL —— 这就是 Live Server 的默认行为。它起一个本地 HTTP 服务（比如 http://localhost:5500），所有静态资源都走这个地址，适合纯前端项目或原型开发。
常见错误现象：Cannot GET / 或页面空白，通常是因为没在根目录右键选择 Open with Live Server，而是直接双击 HTML 文件用系统浏览器打开（这时走的是 file:// 协议，跨域且不支持模块导入）。
- 安装后无需额外配置，右键 HTML 文件 →
Open with Live Server - 默认端口是
5500，可在设置里搜liveServer.settings.port修改 - 不支持调试断点，只负责热重载；想打断点得换别的方案
- 对 Vue/React 等打包项目无效，它只 serve 静态文件，不处理构建产物
Browser Preview 插件支持真浏览器调试
如果你需要在 VS Code 里直接看到 DevTools、Network 面板、响应式设备切换，甚至设断点调试 JS，Browser Preview 是目前唯一能原生集成这些能力的插件。它不是模拟器，而是启动一个真实 Chromium 实例嵌入编辑器侧边栏。
使用场景：调试 fetch 请求失败、检查 CSS 媒体查询生效情况、验证 localStorage 写入、测试 Canvas 动画帧率。
- 必须通过命令面板（
Ctrl+Shift+P）运行Browser Preview: Open Preview启动，不能右键 HTML 打开 - 默认打开
http://localhost:3000，需确保你的本地服务已运行；也可手动填 URL，比如file:///path/to/index.html - 要启用断点调试，必须额外安装
Debugger for Chrome并在.vscode/launch.json中添加type: "browser-preview"配置 - 首次启动较慢（约 2–3 秒），因为要拉起独立渲染进程；关闭预览标签页后进程不会自动退出，需手动停掉
别把 open in browser 当自动预览用
open in browser 插件只是快捷键一键用系统默认浏览器打开当前 HTML 文件，它不监听文件变化，也不起服务，改完代码还得手动刷新 —— 它解决的是「打开」问题，不是「自动预览」问题。
容易踩的坑：很多人装了 open in browser 就以为实现了热更新，结果改完 CSS 保存后页面毫无反应，反复刷新才看到效果，白白浪费注意力。
- 快捷键是
Ctrl+Alt+O（Windows/Linux）或Cmd+Alt+O（macOS） - 适合临时查看单个 HTML 片段，比如写了个 demo 页面想快速瞄一眼结构
- 无法处理相对路径引用的 JS/CSS（
file://协议下跨域限制会报错） - 不推荐和
Live Server或Browser Preview同时启用，容易混淆操作路径
Vue/React 项目该选哪个？
脚手架项目（如 create-react-app、vue-cli、Vite）自带开发服务器，Live Server 和 open in browser 都不适用。你真正需要的是让编辑器「感知」到本地服务状态，并在保存时触发 HMR（热模块替换）。
这时候，VS Code 内置的「保存时自动重启服务」不是靠插件，而是靠脚手架自身能力。插件只起辅助作用：
- 确保终端里已运行
npm run dev或yarn dev，服务监听在http://localhost:3000（或其它端口） - 用
Browser Preview打开对应 URL，它会自动连接并响应 HMR - 如果用 Vite，可配合
Volar（Vue 3）或Vetur（Vue 2）获得组件级热更新提示 - 不要试图用
Live Serverservedist/目录 —— 构建产物缺少开发服务器的路由重写能力，SPA 路由会 404
复杂点在于：Browser Preview 的调试能力依赖 Chrome DevTools 协议，而某些定制内核浏览器（比如国内双核浏览器）不兼容；真要用断点，务必确认用的是标准 Chromium 或 Edge。
