Browser Preview 是内嵌 Headless Chromium 的编辑器预览工具，支持实时刷新但调试能力有限；Debugger for Chrome 提供完整断点调试需配置 launch.json；Live Server 专注热重载，适合静态开发且兼容 Debugger。
Browser Preview：编辑器内嵌浏览器，适合快速验证 UI 变化
它不是简单打开外部浏览器，而是把 Headless Chromium 直接集成进 VS Code 界面，预览窗口和代码编辑器共存。对静态 HTML、CSS 调整或服务端渲染页面特别友好，改完保存就刷新，不用切窗口。
-
Browser Preview: Open Preview命令启动后，默认加载browser-preview.startUrl设置的地址（如http://localhost:3000） - 不依赖本地 Chrome 安装，但调试能力有限——它能渲染、能看控制台日志，但不支持断点、变量监视等完整 DevTools 功能
- 若项目用了 Webpack/Vite 构建且输出路径非根目录（比如
/dist/），需手动在.vscode/settings.json中配browser-preview.webRoot，否则资源 404
Debugger for Chrome：真断点调试，必须配合 launch.json
这是实现“在 VS Code 里设断点、看作用域、单步执行”的核心插件。它不渲染页面，而是连接已运行的 Chrome 实例或启动新实例，把调试上下文同步回编辑器。
- 安装后必须配置
.vscode/launch.json，关键字段：type必须是"chrome"，request推荐用"attach"（连已有 Chrome）或"launch"（启新 Chrome） -
webRoot值要严格匹配源码路径，比如 React 项目通常是"${workspaceFolder}/src"；错配会导致断点灰色无效 - 常见报错
Cannot connect to the target: connect ECONNREFUSED，多数因 Chrome 启动时没加--remote-debugging-port=9222参数，launch模式下插件会自动处理，attach模式需手动启动 Chrome 并指定端口
Live Server：热重载 + 自动刷新，适合纯前端静态开发
它本质是个轻量 HTTP 服务器，启动后自动打开浏览器并监听文件变化。适合没有构建工具的 HTML/CSS/JS 小项目，或者原型快速搭建。
- 右键 HTML 文件 →
Open with Live Server即可，服务默认跑在http://localhost:5500 - 它不提供调试能力，但和
Debugger for Chrome完全兼容：只要在launch.json里把url改成http://localhost:5500/your-page.html，就能边刷新边断点 - 注意：它不解析
import或 JSX，遇到 ES Module 报错Cross-Origin Request Blocked是正常现象，得换 Vite 或 Webpack
browser-preview 调试配置：想用内置预览窗调试？得补插件
vscode-browser-preview 插件本身不带调试器，但它的 type: "browser-preview" 配置可和 Debugger for Chrome 协同工作——前提是两者都装了，且 launch.json 明确指向它。
- 配置示例中
"type": "browser-preview"是有效值，但 VS Code 默认不识别，需确保vscode-browser-preview插件已启用，否则调试按钮灰掉 - 这种组合下，预览窗由插件渲染，断点由 Debugger for Chrome 提供，但仅限 JS 执行层；DOM 断点、样式实时编辑等功能仍需切到 Chrome 的 DevTools
- 容易忽略的一点：如果项目用了 HTTPS 开发服务器（如
https://localhost:3000），browser-preview默认会拦截证书错误，需在设置里开browser-preview.ignoreHttpsErrors
Live Server 快速起页，用 Debugger for Chrome 深入逻辑，再用 Browser Preview 对比多屏响应效果。三者不互斥，但各自能力边界得划清——尤其别指望 Browser Preview 独自完成断点调试。 
