填 pwa-chrome。旧版 "chrome" 类型已弃用，vscode 自 1.48 起默认使用 pwa-chrome，支持完整 devtools 功能；若误用 "chrome" 会导致断点不命中、source map 失效等问题。
launch.json 里 type 字段该填 chrome 还是 pwa-chrome？
填 pwa-chrome。旧版 chrome 类型已弃用，VSCode 自 1.48 版起默认使用 pwa-chrome（基于新版 JavaScript Debugger），它支持更完整的 DevTools 功能，比如 Network 面板、Elements 实时编辑、CSS 检查等。
如果仍用 "type": "chrome"，可能遇到断点不命中、source map 失效、或控制台输出缺失等问题——尤其在使用 Webpack/Vite 构建的项目中。
-
pwa-chrome要求 Chrome 80+，且需确保本地 Chrome 已启用远程调试端口（通常自动处理） - 若调试 Edge，对应类型是
pwa-msedge，不是msedge - 配置中不要混用旧插件名（如
Debugger for Chrome）和新调试器，现代 VSCode 已内置，无需额外安装
webRoot 配置错会导致断点完全失效
webRoot 不是指 HTML 文件所在目录，而是源码映射的根路径——即 source map 中 sources 字段所指向的原始文件位置。配错就等于告诉调试器“去错地方找代码”，断点自然不触发。
常见错误：把 webRoot 设为 ${workspaceFolder}/dist（构建后目录），而实际 source map 指向的是 src/ 下的原始文件。
- 典型正确值：
"webRoot": "${workspaceFolder}/src"（Vue/React 项目）或"webRoot": "${workspaceFolder}"（纯 HTML + JS 项目） - 若用 Vite，默认构建不生成 source map 到 dist，需确认
build.sourcemap: true已开启 - Webpack 项目可配合
sourceMapPathOverrides修复路径映射，例如："webpack:///./.*": "${webRoot}/*"
调试静态 HTML 文件时别用 url，改用 file 协议
直接双击打开的 index.html 属于 file:// 协议，Chrome 出于安全限制会禁用某些调试能力（如 fetch 请求、Service Worker）。若你在 launch.json 里写 "url": "file:///path/to/index.html"，VSCode 可能启动失败或断点无效。
正确做法是用 file 字段替代 url，让调试器以兼容模式加载：
{
"name": "Open index.html",
"type": "pwa-chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
}
-
file字段只适用于本地静态文件，不支持动态服务器（如 localhost:3000） - 此时浏览器地址栏显示
file://，但调试功能（断点、console、scope 查看）全部可用 - 若需网络能力（如 AJAX），必须起本地服务，改回
url+webRoot组合
Browser Preview 扩展和调试器不是一回事
vscode-browser-preview 是预览工具，不是调试器。它能在编辑器内嵌 Chrome 渲染页面，支持响应式模拟和自动刷新，但无法设置断点、查看调用栈或单步执行——它不连接 Chrome DevTools Protocol 的调试通道。
想边改边看效果，用 Browser Preview；想查变量、跟异步链、修 bug，必须配 pwa-chrome + launch.json。
- 两者可共存：Preview 用于快速视觉验证，
pwa-chrome用于逻辑调试 - Browser Preview 的 “Start Debugging” 命令只是打开 DevTools 面板，并非真正接入 VSCode 调试会话
- 调试复杂交互（如 Promise 链、事件监听器触发顺序）时，依赖 VSCode 的断点和 call stack，Browser Preview 做不到
webRoot 的严格对应关系——差一个斜杠、多一层子目录，断点就静默失效。与其反复重启调试器，不如先打开 Chrome DevTools → Sources 面板，确认左侧树状结构里能否看到你的原始 .ts 或 .vue 文件。能看到，说明映射通了；看不到，优先检查 webRoot 和构建配置。
