live server通过本地http服务器实现保存即刷新、支持模块导入与ajax，是解决vs code html实时预览问题的事实标准；vscode-browser-preview则提供内嵌chromium调试环境，二者功能定位不同，不可混用。
VSCode 里“完美浏览器预览”不是靠一个插件堆功能，而是根据你要解决的具体问题选对工具、配对行为、避开默认陷阱。Live Server 和 vscode-browser-preview 解决的是两类事：一个是本地 HTTP 服务 + 实时刷新，另一个是编辑器内嵌真实 Chromium 调试环境。混用或错配，反而卡住。
Live Server 启动失败：不是插件坏了，是工作区没打开
点状态栏 Go Live 没反应？大概率你只是双击打开了单个 index.html 文件，而不是通过 文件 → 打开文件夹 加载整个项目目录。Live Server 只在已打开的文件夹工作区下生效，且默认只认根目录下的 index.html（必须小写、无空格、无中文）。
- 右键编辑器标签页里的
index.html→ 选Open with Live Server，比点状态栏更可靠 - 如果入口文件叫
home.html，Go Live不会自动加载它；浏览器手动访问http://localhost:8080/home.html - 右下角没显示端口号（如
Localhost:5500），按Ctrl+Shift+U打开输出面板，切换到Live Server日志，看是否有Port is already in use或路径解析失败
vscode-browser-preview 打不开预览：Chrome 路径和调试配置是关键
安装完插件却点不动 Browser Preview: Open Preview？常见原因是 Chrome 没装，或 VSCode 找不到可执行文件。它依赖系统已安装的 Chrome/Edge，不自带浏览器引擎。
- 检查 Chrome 是否已安装：命令行运行
chrome --version或msedge --version - 在 VSCode 设置里搜
browserpreview.chromePath，手动填入 Chrome 可执行路径，例如 Windows 是C:\Program Files\Google\Chrome\Application\chrome.exe - 要调试 JS，必须在项目根目录建
.vscode/launch.json，配置type为browser-preview，不能复用chrome或pwa-chrome类型 - 断点只在预览窗口中触发，不是在当前编辑器标签页里——这点容易误以为“断点没生效”
CSS 修改不生效：缓存和路径错误占九成
Live Server 声称支持 CSS 热重载，但改完 style.css 页面没变，几乎全是浏览器缓存或路径问题，不是插件故障。
- 保存后注意 VSCode 右上角是否弹出
Reloading CSS…提示；没提示说明 Live Server 根本没监听到变更 - Chrome DevTools 的
Network面板勾选Disable cache（仅 DevTools 开着时生效） -
<link rel="stylesheet" href="css/style.css">对应的真实路径必须是./css/style.css，不能是./assets/css/style.css或拼错大小写 - 避免在 CSS 中多层
@import，Live Server 对嵌套@import的热更新支持不稳定
别把 Live Preview 当主力：它连 JS 都不执行
VSCode 自带的 Live Preview（不是 Live Server）只是 WebView 渲染，不启动 HTTP 服务，也不执行 JavaScript，不加载外部资源（比如 CDN 的 jQuery 或字体），更没法调试。它适合快速看个纯 HTML 结构，但只要涉及交互、AJAX、跨域或第三方库，立刻失效。
真正验证响应式布局、表单提交、控制台报错，必须用 Live Server 或 vscode-browser-preview——前者跑在真实 localhost 上，后者提供完整 DevTools 集成。把 Live Preview 当主力，等于拿幻灯片当开发环境用。
