Live Server 默认调用系统默认浏览器，非硬编码 Chrome；若打不开 Chrome，需在 VS Code 设置中配置 "liveServer.settings.CustomBrowser": "chrome" 并重启，或确保系统默认浏览器已正确设为 Chrome。
直接用 Live Server 就够了，90% 的静态页面开发场景不需要额外组合插件。它开箱即用、不依赖配置、刷新逻辑稳定，比手动配 Browser Preview 或折腾 Open in Browser + CSS Peek 组合更省心。
Live Server 启动后打不开 Chrome 怎么办
本质是系统默认浏览器没被正确识别或覆盖。VSCode 不会主动改系统设置，只读取当前环境变量和注册表（Windows）/plist（macOS）里的默认值。
-
Live Server默认调用系统默认浏览器，不是硬编码 Chrome；如果系统默认是 Safari 或 Edge，它就不会打开 Chrome - 临时解决：右键 HTML 文件 → “Open with Live Server”，然后在浏览器地址栏手动把
127.0.0.1换成localhost（某些企业网络策略会拦截 127 地址） - 长期 fix：在 VSCode 设置里加这行：
"liveServer.settings.CustomBrowser": "chrome"，注意拼写是CustomBrowser，不是defaultBrowser或browser - Mac 用户若装了 Chrome Canary，需确认是否设为默认；
chrome值只认稳定版 Chrome，Canary 需写"chrome-canary"
想点一下就预览 CSS 修改，但 Live Server 不触发实时更新
Live Server 本身只监听文件保存事件并刷新整个页面，不解析 CSS 变更做局部重载。所谓“实时”是整页 reload，不是 HMR（模块热替换）。
- 纯 CSS 修改后必须按
Ctrl+S（或Cmd+S）保存文件，Live Server 才会发 reload 信号；编辑中没保存 = 没变化 - 如果用了
@import或link rel="stylesheet"加载外部 CSS，确保路径是相对路径且没 404；控制台出现Failed to load resource就会导致样式不生效 - 不要指望它像 Vue CLI 那样监听 SCSS 变更并自动编译；Live Server 不处理预处理器，只服务已生成的 CSS
- 真要局部更新，得换工具：比如用
vscode-browser-preview插件 + 启用其内置的 CSS 注入功能（需手动开启"browser-preview.injectCSS": true）
Open in Browser 和 Browser Preview 插件到底该选哪个
看你要的是“跳转”还是“嵌入”。前者是快捷方式，后者是调试环境。
-
Open in Browser就是调用系统命令打开新浏览器窗口，不带调试能力，也不同步编辑器光标位置；适合快速验证最终效果，但无法打断点、看不到 console 输出 -
Browser Preview在 VSCode 内部开一个真实 Chromium 实例，支持 DevTools、网络面板、断点调试；但启动慢、内存占用高，且对本地 file:// 协议支持不稳定（必须走 http://） - 如果你正在写纯 HTML/CSS 作业或静态 landing page，
Open in Browser足够；如果涉及 JS 交互、API 调试或需要 inspect 元素，Browser Preview或直接连Debugger for Chrome更靠谱 - 二者不能共存于同一调试流程：一个负责“打开”，一个负责“内嵌调试”，混用反而容易端口冲突或 URL 路由错乱
真正容易被忽略的点是：所有这些插件都依赖你项目根目录下有可访问的入口文件（通常是 index.html）。如果文件名是 home.html 或放在子目录里，Live Server 默认不会找到——得手动右键该文件再点“Open with Live Server”，而不是点文件夹或空白处。
