应使用 chrome，因 debugger for chrome 插件支持 chromium 内核的 edge，配置名固定为 "chrome"；旧版 edgehtml 不支持调试，需换用 chromium 内核浏览器。
launch.json 里该用 chrome 还是 edge？
取决于你实际调试时开的是哪个浏览器，不是项目类型。VSCode 的 Debugger for Chrome 插件已支持 Edge（基于 Chromium），但配置名仍叫 chrome；如果你用旧版 Edge（EdgeHTML），它不支持现代 DevTools 协议，根本没法断点——直接换 Chromium 内核的 Edge 或 Chrome。
实操建议：
- 确认已安装 Debugger for Chrome 插件（ID：
msjsdiag.debugger-for-chrome），VS Code 1.80+ 默认自带类似功能，但老版本必须手动装 -
type字段固定写"chrome"，哪怕你调的是 Edge；VSCode 会自动识别本地 Chromium 系列浏览器 - 如果系统没装 Chrome，但装了 Edge，
runtimeExecutable要显式指定路径，比如 Windows 上："C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"
为什么改了 url 却总跳转到 localhost:8080？
因为前端项目启动后，开发服务器（Vite、Webpack Dev Server）默认监听 localhost:3000 或 localhost:5173，而 launch.json 里的 url 是告诉 VSCode “去哪个地址启浏览器并连上调试器”，不是让开发服务器改端口。
常见错误现象：改了 url 为 "http://localhost:5173"，但项目实际跑在 :3000，结果打不开或白屏。
实操建议：
- 先确保项目已运行（
npm run dev或yarn dev），再点 VSCode 的 ▶️ 启动调试 -
url必须和开发服务器实际输出的地址完全一致，包括协议（httpvshttps）、端口、路径（如带/app/前缀） - 如果项目用了代理或 base path（如 Vite 的
base配置），url得同步加上，否则断点不生效——浏览器加载的 JS 文件路径和 sourcemap 对不上
Vue/React 源码断点不命中？检查 sourceMaps 和 webRoot
断点不触发，90% 是 sourcemap 没对上。Vue 和 React 项目通常用构建工具生成 sourcemap，但 VSCode 需要知道“源码在哪”，才能把浏览器里执行的打包后代码，映射回你编辑器里的 .vue 或 .tsx 文件。
实操建议：
-
sourceMaps必须设为true（默认就是 true，但有人手误关掉） -
webRoot要指向开发服务器 serving 的根目录，通常是项目根目录（"${workspaceFolder}"），不是dist或build - Vue 项目若用
vue-cli，确保vue.config.js里devtool是"source-map"或"eval-source-map"；Vite 默认开sourceMap: true，不用额外配 - React（Create React App）默认开启 sourcemap，但如果你 eject 了，要检查
webpack.config.dev.js中devtool是否为"cheap-module-source-map"
调试时提示 Unable to launch browser: "Could not attach to page"
这是 Chrome/Edge 启动失败或端口被占的典型报错。VSCode 调试器需要通过 --remote-debugging-port=9222 启动一个独立浏览器实例，而不是复用你正在用的那个。
实操建议：
- 关掉所有已打开的 Chrome/Edge 窗口（包括后台进程），Windows 可在任务管理器里结束
chrome.exe/msedge.exe所有实例 - 检查
port字段是否被其他程序占用，默认9222，可改成9223等空闲端口 - 加
"runtimeArgs": ["--no-sandbox", "--disable-gpu"]（尤其在 Linux 或 CI 环境下） - Mac 用户遇到此错，大概率是 SIP 限制了进程注入，临时关闭 SIP 不现实，更稳的解法是改用
attach模式：先手动开浏览器带调试参数，再让 VSCode 连上去
最常被忽略的一点：launch.json 配置只对当前工作区生效，如果你在多根工作区（multi-root workspace）里打开项目，得把 .vscode/launch.json 放在对应前端项目的子文件夹里，而不是根工作区目录下——否则 VSCode 根本读不到这个配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
