vscode不能内置浏览器，但可通过live server或open in browser扩展分别调用chrome、firefox等真实浏览器预览html文件；live server支持多页面同端口访问，open in browser可精准指定浏览器；调试需单独安装对应debugger扩展并配置launch.json。
VSCode 本身不内置浏览器，但能同时控制多个浏览器预览
VSCode 是编辑器，不是浏览器集合器。它不能“显示”多个浏览器窗口在内部，但可以通过扩展（如 Live Server、Open in Browser）把同一个或不同 HTML 文件，**分别发给 Chrome、Firefox、Edge 等真实浏览器进程打开**——这才是你真正需要的“看到多个浏览器”的实操路径。
关键不是让 VSCode 托管浏览器，而是让它成为调度中心：一键触发多个浏览器加载不同页面，或同一页面的不同路径。
用 Live Server 同时开多个 HTML 页面（最常用场景）
你有 index.html、about.html、contact.html，想在 Chrome 和 Firefox 里并排对比渲染效果？Live Server 完全支持，且不冲突。
图片旋转弹出框插件-WOWWINDOW
下载
WowWindow是Lightbox的一个替代，更加有趣，更加强大。该插件用到了css3，所以在浏览器的支持上将会有一些不足。如果你正在寻找Lightbox的替代插件，那么WowWindow将是一个不错的选择。
- 安装
Live Server扩展后，右键任一 HTML 文件 → “Open with Live Server”，它会启动本地服务（如http://127.0.0.1:5500） - 再右键另一个 HTML 文件 → 同样选 “Open with Live Server”，它不会重启服务，而是复用同一端口，在浏览器新标签页打开
http://127.0.0.1:5500/about.html - 此时你在 Chrome 里开了两个标签，Firefox 里手动粘贴
http://127.0.0.1:5500/contact.html，就实现了三端同步查看 - ⚠️ 注意：
Live Server默认只监听当前工作区根目录；如果 HTML 在子文件夹（如src/pages/），需确保路径写对，或改用file://方式（但会禁用某些 API，如fetch）
用 Open in Browser 插件切换不同浏览器打开（精准控制目标）
当你需要强制某个 HTML 用 Edge 测试兼容性，另一个用 Safari 查 CSS 表现，Open in Browser 比 Live Server 更直接。
- 安装插件后，右键 HTML 文件会出现 “Open in Default Browser” 和 “Open in Other Browsers”
- 后者展开后列出已检测到的浏览器（Chrome、Firefox、Edge、Safari 等），点击即用对应浏览器打开当前文件
- 快捷键
Alt+Shift+B（Windows/Linux）或Cmd+Shift+B（macOS）可快速唤出浏览器选择菜单 - ⚠️ 常见坑：插件可能检测不到非系统默认安装路径的浏览器（比如便携版 Chrome），这时要手动配置
openInBrowser.default或openInBrowser.customBrowser路径
调试多个浏览器时，别混淆“打开”和“连接调试器”
很多人以为“在 VSCode 里点一下就能调试 Chrome 和 Firefox”，其实这是两件事：打开是预览，调试是连接 devtools 协议。
-
Debugger for Chrome和Debugger for Firefox是独立扩展，需分别安装、分别配置launch.json - 一个调试配置只能连一个浏览器实例；想同时调试 Chrome 和 Firefox，得建两个 launch 配置，并分别点击“启动调试”
- 例如 Chrome 配置中指定
"url": "http://127.0.0.1:5500/index.html"，Firefox 配置中同样指向该地址，但用不同端口或 profile 隔离上下文 - ⚠️ 关键限制：Firefox 调试器不支持所有断点类型（如 DOM 断点），而 Chrome 支持更全；别假设行为一致
真正卡住人的地方，往往不是“怎么开”，而是没分清“谁在管 URL 路由”——是 Live Server 的 http:// 服务，还是系统 file:// 协议？前者支持跨域请求和模块导入，后者在现代浏览器里默认禁用 fetch 和 import。选错就白开了几个窗口。
