VSCode 无真正内置浏览器插件，Browser Preview 是基于 Headless Chromium 的第三方嵌入式预览工具；需手动配置浏览器路径，支持 chrome://inspect 调试但不提供完整 DevTools 界面。
VSCode 没有真正“内置”的浏览器插件，所谓“内置浏览器”实际是第三方插件（如 Browser Preview）基于 Headless Chromium 实现的嵌入式预览窗口——它不等于系统浏览器，也不具备完整 DevTools，但能解决「保存即刷新」和「轻量调试」的核心诉求。
Browser Preview 插件启动后打不开页面？检查这三处
常见错误现象：Failed to launch browser、预览窗口空白、状态栏显示 Connecting... 却无响应。
- 确认插件已正确安装：在扩展面板搜索
Browser Preview（注意不是Live Server或Live Preview），作者应为auchenberg - 首次运行需手动指定浏览器路径：命令面板（
Ctrl+Shift+P）输入Browser Preview: Configure Browser Path，选择本地 Chrome/Edge 的可执行文件（macOS 路径类似/Applications/Google Chrome.app/Contents/MacOS/Google Chrome；Windows 类似C:\Program Files\Google\Chrome\Application\chrome.exe） - 若用 M1/M2 Mac，避免选错架构版本：x86_64 版 Chrome 可能无法启动，优先选 Apple Silicon 原生版
Live Server 和 Browser Preview 到底该用哪个？
使用场景决定选择：前者适合纯静态 HTML/CSS/JS 快速验证；后者适合需要调试逻辑、多端 viewport 测试或与本地开发服务器（如 Vite、Next.js）深度集成的项目。
-
Live Server启动的是一个最小化 HTTP 服务（默认端口5500），只负责文件托管和自动刷新，不支持断点、console.log跳转、源码映射 -
Browser Preview启动的是真实浏览器内核实例，可通过chrome://inspect连接 DevTools，支持debugger语句、断点停靠、作用域变量查看 - 两者可共存：用
Live Server提供http://地址，再让Browser Preview加载该地址，兼顾刷新速度与调试能力
launch.json 配置 pwa-chrome 时断点不生效？重点看 webRoot 和 sourceMapPathOverrides
典型症状：代码里打了断点，但 VS Code 显示空心圆（未绑定），F5 启动后直接跳过；或断点打在 bundle.js 上，无法跳回 src/App.tsx。
-
webRoot必须指向你源码所在目录，例如 React/Vite 项目通常为"${workspaceFolder}/src"，而不是"${workspaceFolder}" - 构建工具不同，
sourceMapPathOverrides规则不同：
— Vite 默认用"vite:///src/*": "${webRoot}/*"
— Webpack 常见为"webpack:///src/*": "${webRoot}/src/*"
— 若不确定，先删掉该项，打开浏览器 DevTools 的 Sources 面板，看左侧文件路径前缀是什么，再反推映射规则 - 确保构建时生成 source map：Vite 中确认
build.sourcemap: true；Create React App 默认开启，无需额外配置
真正容易被忽略的是：Browser Preview 的「预览窗口」本身不提供完整 DevTools 界面，想用断点、Network、Performance，必须手动打开 chrome://inspect 并连接对应 target——这不是 bug，是设计使然。别指望点击预览窗口右键就能呼出 Elements 面板。
