Browser Preview插件直接启用Headless Chromium实现真浏览器预览，无需额外配置；而openInDefaultBrowser仅转file:// URL调系统默认浏览器，不支持热重载、调试及本地服务，且对未保存文件、中文路径等场景兼容性差。
直接装 Browser Preview 插件，不用额外配置就能开真浏览器预览——它用的是 Headless Chromium，不是简单调系统默认浏览器。
为什么不能只用 openInDefaultBrowser 命令
VS Code 自带的 openInDefaultBrowser 只做一件事：把当前 HTML 文件路径转成 file:// URL，丢给系统默认浏览器。它不启动调试器、不支持热重载、不处理本地开发服务器（比如 http://localhost:3000），更没法在编辑器里嵌入窗口。
- 未保存的 HTML 文件会静默失败，除非你显式加
{"force": true} - 遇到中文路径或空格时，部分插件会 URL 编码出错，
openInDefaultBrowser原生命令反而更稳 - 它完全绕过前端开发流程——你改完 React 组件，它不会自动刷新，也不会连上 DevTools
Browser Preview 怎么快速启用并指向你的开发地址
装完插件后，核心就两步：设起始 URL + 选启动方式。别碰一堆高级参数，先跑起来再说。
- 打开设置（
Ctrl+,），搜browser-preview.startUrl，填你本地服务地址，比如http://localhost:3000或https://your-test-site.com - 启动方式任选其一：
– 点 VS Code 底部状态栏的Browser Preview按钮
– 按快捷键Ctrl+Shift+Alt+B（Windows/Linux）或Cmd+Shift+Alt+B（macOS）
– 打开命令面板（Ctrl+Shift+P），输Browser Preview: Open Preview - 如果提示找不到 Chrome，再搜
browser-preview.chromeExecutable，手动填路径，例如：/usr/bin/google-chrome-stable（Linux）或C:\Program Files\Google\Chrome\Application\chrome.exe（Windows）
调试时必须配 launch.json 吗
不必须，但想断点调试就得配。没配也能看页面，只是没法停在 JS 代码里。
- 新建
.vscode/launch.json，写一个最简配置就行：
{
"version": "0.1.0",
"configurations": [
{
"type": "browser-preview",
"request": "attach",
"name": "Browser Preview: Attach"
}
]
}
然后按 F5 启动调试——这时预览窗口会自动注入调试代理，你在 TS/JS 行号边点一下就能打断点。
- 注意：
attach模式要求预览窗口已打开；如果想一键启服务+开预览+进调试，用launch模式，但得填"url"字段 - 别漏掉
type: "browser-preview"—— 写成"chrome"或"pwa-chrome"都不生效
真正容易被忽略的是：这个预览窗口和你的本地开发服务器是两个独立进程。它不代理请求，也不改 CORS 策略。如果你的 API 调用跨域失败，问题不在插件，而在服务端是否开了 Access-Control-Allow-Origin。
