VSCode插件如何快速打开浏览器预览-VSCode-PHP中文网

browser preview插件直接启用headless chromium实现真浏览器预览，无需额外配置；而openindefaultbrowser仅转file:// url调系统默认浏览器，不支持热重载、调试及本地服务，且对未保存文件、中文路径等场景兼容性差。

vscode插件如何快速打开浏览器预览

直接装 Browser Preview 插件，不用额外配置就能开真浏览器预览——它用的是 Headless Chromium，不是简单调系统默认浏览器。

为什么不能只用 `openInDefaultBrowser` 命令

VS Code 自带的 openInDefaultBrowser 只做一件事：把当前 HTML 文件路径转成 file:// URL，丢给系统默认浏览器。它不启动调试器、不支持热重载、不处理本地开发服务器（比如 http://localhost:3000），更没法在编辑器里嵌入窗口。

未保存的 HTML 文件会静默失败，除非你显式加 {"force": true}
遇到中文路径或空格时，部分插件会 URL 编码出错，openInDefaultBrowser 原生命令反而更稳
它完全绕过前端开发流程——你改完 React 组件，它不会自动刷新，也不会连上 DevTools

`Browser Preview` 怎么快速启用并指向你的开发地址

装完插件后，核心就两步：设起始 URL + 选启动方式。别碰一堆高级参数，先跑起来再说。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

打开设置（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 行号边点一下就能打断点。