open in browser 只支持 file:// 协议直接打开本地 html 文件，适合静态页预览；live server 需正确配置工作区根目录和监听范围才能自动刷新；browser preview 受限于 webview 安全策略，不适用于交互调试；vs code 与 chrome 联动调试需 launch.json、sourcemap 和浏览器安全设置三者协同。
Open in Browser 能不能直接打开 HTML 文件
能，但只对 file:// 协议生效，不走本地服务器。点击右键 → “Open in Default Browser” 会用系统默认浏览器直接加载本地 HTML 文件路径，适合静态页面快速预览。
常见错误现象：Cannot open file:///xxx/index.html in browser —— 多数是 macOS 上 Safari 启用了“阻止弹出窗口”或 Windows 上杀毒软件拦截了文件协议访问。
- Windows 用户若遇到白屏，尝试右键 → “Open in Other Browser”，选 Chrome 或 Edge
- macOS 用户可临时关闭 Safari 的“阻止弹出窗口”，或改用 Chrome（它对
file://更宽松） - 如果项目用了相对路径引用 CSS/JS，
file://下可能因跨域被浏览器拒绝加载资源，此时必须用本地服务
Live Server 插件启动后为什么页面没刷新
Live Server 默认监听文件变更并自动重载，但只对当前工作区根目录下的文件有效；子目录里新建的 HTML 若没被纳入 watch 范围，保存后不会触发刷新。
容易踩的坑：Live Server 不会自动识别你刚创建的 src/index.html，除非你把 src 设为工作区根目录，或手动配置 liveServer.settings.CustomBrowser 和 liveServer.settings.AdvanceCustomBrowserCmdLine。
- 检查 VS Code 是否打开的是整个项目文件夹（含
package.json或index.html），而不是单个文件 - 确认右下角状态栏显示 “Go Live” 按钮已亮起，且端口号（如
http://127.0.0.1:5500）可正常访问 - 禁用其他可能冲突的插件，比如
Browser Preview或旧版Auto Open，它们会抢注http://请求 - 若用 Webpack/Vite 等构建工具，别依赖 Live Server——它和热更新机制不兼容，反而造成双刷新
Browser Preview 插件打不开内嵌浏览器
Browser Preview 是在 VS Code 内部 iframe 中渲染页面，不依赖系统浏览器进程，但受限于 VS Code 的 WebView 安全策略，无法执行某些 JS 行为（如 window.open、localStorage 读写、Canvas 渲染等）。
典型表现：页面空白、控制台报 SecurityError: localStorage is not accessible、CSS 动画卡顿、第三方 SDK（如支付宝/微信 JS-SDK）完全失效。
- 它适合查看纯 HTML/CSS 布局效果，不适合调试交互逻辑或 API 调用
- 启用前先关掉所有其他浏览器类插件，避免端口或 WebView 实例抢占
- Mac 用户若发现界面模糊，尝试在设置中开启
browserPreview.enableHighDpi - 不要把它当作开发环境主力预览工具，仅作快速布局核对用
如何让 VS Code 和 Chrome 调试真正联动
靠 Debugger for Chrome 插件本身不够，必须配 launch.json 并确保 sourcemap 正确生成。很多前端项目构建后路径映射错乱，导致断点打在压缩代码上，或者根本无法命中。
关键参数：webRoot 必须指向实际运行时的根路径（不是源码路径），sourceMapPathOverrides 要匹配构建产物里的 sourceMappingURL 注释。
- Vue/React 项目建议用框架官方推荐调试方式：Vue 用
Volar+ 浏览器 Vue Devtools；React 用React Developer Tools+Debugger for Chrome - 如果用 Vite，
launch.json中url应设为http://localhost:5173（而非file://），且确保vite.config.ts开启build.sourcemap: 'inline' - Chrome 需启用“允许来自文件 URL 的不安全内容”，否则本地
file://页面无法加载 sourcemap
