vscode调试前端网页必须满足三个硬性条件：type为"pwa-chrome"、url与浏览器地址栏完全一致、webroot指向源码根目录；缺一即导致断点空心或不触发，本质是调试通道未通，而非代码问题。
VSCode 调试前端网页不是“点开就能断点”，而是必须让 VS Code、Chrome、你的源码三者路径和协议对齐；只要 url、webRoot、sourceMapPathOverrides 任一错位，断点就变空心圆或直接不触发——这不是代码问题，是调试通道没通。
装错插件，整个调试链路直接失效
Debugger for Chrome（旧版）已彻底弃用，VS Code 1.80+ 只认 type: "pwa-chrome"，而它由 Debugger for Edge 扩展提供支持（微软官方统一维护，同时兼容 Chrome/Edge/WebView2）。装错插件的典型表现：launch.json 写对了也报 Unable to launch browser: unknown error，且无任何提示。
- 卸载所有名称含
Chrome Debugger、legacy或版本号带v4.x的插件 - 在扩展市场搜索并安装
Debugger for Edge（发布者必须是 Microsoft） - 安装后无需重启，但要确认右下角状态栏显示“Debugger for Edge 已启用”
launch.json 配置必须满足三个硬性匹配
launch.json 不是模板填充游戏，每个字段都对应真实运行时环境。写错任意一项，VS Code 就连不上页面上下文，断点自然无效。
-
type只能是"pwa-chrome"（不是"chrome"，不是"pwa-edge"） -
url必须和浏览器地址栏**完全一致**：协议（http://，不能是file://）、端口（:5173）、路径（/login末尾斜杠有无）、哈希（#home）都要匹配 -
webRoot指向你编辑的源码根目录，比如"${workspaceFolder}"；若项目结构是src/写代码、dist/输出，但你在dist/index.html里引用./js/app.js，那webRoot得设成"${workspaceFolder}/src"并配sourceMapPathOverrides
Chrome 必须用命令行启动并指定调试端口
双击图标打开的 Chrome 默认关闭远程调试协议，VS Code 连不上就会卡在 Could not connect to localhost:9222。这不是配置问题，是 Chrome 根本没暴露接口。
- 先关掉所有 Chrome 进程（Windows：执行
taskkill /f /im chrome.exe；macOS/Linux：pkill -f "chrome.*9222"） - 用命令行启动：
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug（--user-data-dir是必须的，否则拒绝以调试模式复用主配置） - 如果 9222 端口被占，可换为 9223，但必须同步改
launch.json中的port字段（仅request: "attach"模式才需显式写port）
断点变空心圆？90% 是 source map 映射失败
空心圆 = VS Code 找到了断点位置，但没加载到原始源码。常见于 Vite/Webpack 构建后路径与 sourcemap 中 sources 字段不一致，或构建时没生成有效 map。
- Vite 项目检查
vite.config.ts是否设了build.sourcemap: true（开发模式默认开启，但 build 后需手动配） - Webpack 项目确保
devtool: 'inline-source-map'（比source-map更稳，避免路径解析失败） - 在 Chrome DevTools 的 Sources 面板里，看能否展开
vite:///src/或webpack:///src/—— 看不到就说明 source map 没生效 - 必要时加
sourceMapPathOverrides，例如 Vite 默认生成vite:///src/，可映射为"vite:///src/*": "${webRoot}/src/*"
最常被忽略的一点：VS Code 从不执行 JS，它只是把断点转发给 Chrome 的 DevTools；所以哪怕 launch.json 全对，如果本地服务没跑起来（npm run dev 没执行），或者浏览器访问的是 file:// 协议页面，断点照样不会触发——它根本没机会进入执行上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
