live server比open in browser更适合日常开发，因为它启动真实http服务（如http://127.0.0.1:5500），支持cors、fetch等现代api及相对路径解析，保存即自动刷新；而open in browser仅用file://协议，无服务器环境，导致ajax失败、api不可用且需手动刷新。
Live Server 为什么比 Open in Browser 更适合日常开发
Live Server 是当前最实用的本地预览方案，它解决的不是“能不能打开”，而是“改完要不要手动刷新”。Open in Browser 只是调用系统默认浏览器打开文件，不启动服务器，file:// 协议下很多现代 API（如 fetch、Service Worker）直接不可用，且跨域限制会让你的 AJAX 请求直接失败。
- Live Server 启动的是真实 HTTP 服务（默认
http://127.0.0.1:5500），支持 CORS、静态资源加载、相对路径解析 - 保存即刷新，无需右键 → “Open with Live Server” 重复操作；可配置为“保存时自动打开浏览器”
- 支持自定义端口、根路径、忽略文件（通过
liveServer.settings.donotShowInfo和liveServer.settings.CustomBrowser控制） - 注意：如果项目用了构建工具（如 Vite、Webpack Dev Server），就别开 Live Server —— 它会和已运行的
localhost:3000冲突
browser-preview 插件必须配 Chrome/Edge，且不能只靠安装就生效
vscode-browser-preview 看起来是“编辑器里嵌个浏览器”，但实际依赖你本地已安装的 Chrome 或 Edge，并调用其无头模式（headless Chromium）。它不是独立渲染引擎，所以装完插件后如果点“Open Preview”没反应，大概率是路径没对上。
- 检查
browser-preview.chromeExecutable设置是否指向正确的可执行文件（macOS 是/Applications/Google Chrome.app/Contents/MacOS/Google Chrome，Windows 常见路径是C:\Program Files\Google\Chrome\Application\chrome.exe） - 若用 Edge，需明确设为
"browser-preview.chromeExecutable": "msedge"，并确保 Edge 已加入系统 PATH - 遇到
ERR_CONNECTION_REFUSED？说明预览试图访问一个没跑起来的服务，先确认你的本地服务（如npm start）已在运行 - 该插件不兼容某些需要完整用户态浏览器环境的功能（如 WebRTC、部分 Canvas API），调试时仍需切到真实浏览器验证
调试配置里 pwa-chrome 和 browser-preview 类型不能混用
VSCode 调试器类型选错，断点就永远不命中。很多人把 type: "browser-preview" 和 type: "pwa-chrome" 当成同一件事，其实它们走的是完全不同的协议栈。
-
pwa-chrome是官方推荐的现代调试类型，对接 Chrome DevTools Protocol（CDP），支持源映射、异步堆栈、React/Vue Devtools 集成 -
browser-preview类型仅在安装了vscode-browser-preview插件后才可用，它调试的是插件内嵌的预览页，不是你系统里那个 Chrome - 如果你用的是 Vite 或 Create React App，默认监听
localhost:3000，就该用pwa-chrome；只有当你明确想在编辑器里调试一个静态 HTML 文件（且不启服务），才考虑browser-preview -
webRoot必须精确匹配源码路径，比如项目结构是src/index.html，那"webRoot": "${workspaceFolder}/src"才能让断点正确映射
多个插件共存时，launch.json 的 url 和端口容易被忽略
你可能同时装了 Live Server、Vite、browser-preview，结果发现“Open Preview”打不开，或者 F5 调试跳转到错误地址——问题往往不在插件本身，而在 launch.json 里写死的 url 没跟着实际服务变。
- Live Server 默认端口是
5500，Vite 是3000，Next.js 是3001，硬编码"url": "http://localhost:3000"在非 Vite 项目里必然失败 - 更稳妥的做法是：启动服务后看终端输出的实际地址（例如
Local: http://localhost:4173/），再同步更新launch.json - 如果用的是
file://协议（比如纯 HTML + JS 小实验），pwa-chrome无法调试，必须换用browser-preview类型，且url改为"file://${workspaceFolder}/index.html" - 别忘了检查
.vscode/settings.json是否有全局覆盖项，比如"liveServer.settings.port": 8080，它会影响所有 Live Server 实例
pwa-chrome 调试器连不上；browser-preview 依赖的 Chrome 可执行路径写错，整个预览功能就静默失效。这些细节不显眼，但一出错就全链路中断。
