能调试，但必须用 Debugger for Edge 插件 + "type": "pwa-chrome" 配置；装错插件或写错 type 会直接失败，url 必须完整带协议且端口匹配，sourceMap 和 webRoot 配置错误会导致断点不命中。
能调试，但必须用 Debugger for Edge 插件 + "type": "pwa-chrome" 配置，装错插件或写错 type 就直接失败。
装对插件：Debugger for Edge 而不是 Debugger for Chrome
官方已废弃 Debugger for Chrome（旧版），现在统一由 Debugger for Edge 扩展接管，它同时支持 Chrome、Edge 和 WebView2。装错会导致 VS Code 根本识别不了 "pwa-chrome" 类型。
- 卸载所有名称含
Chrome Debugger、legacy或版本号带v4.x的插件 - 在 VS Code 扩展市场搜索并安装
Debugger for Edge（发布者是 Microsoft） - 安装后无需重启，但要确认扩展状态为“已启用”
launch.json 必须写对 type 和 url
"type": "chrome" 是过时写法，VS Code 会报 Unable to launch browser: unknown error；url 缺少协议或端口不匹配，则静默失败——浏览器打不开，也没错误提示。
-
"type"只能是"pwa-chrome"（注意带pwa-前缀） -
"url"必须完整，例如"http://localhost:5173"，不能只写"localhost:5173"或"/" - 如果项目跑在非标准端口（如 8081），
url和本地服务端口必须一致 - 避免使用
file://协议，fetch、localStorage 等 API 会受限，且 source map 映射常失效
断点不命中？先查 sourceMap 和 webRoot
断点变空心圆、跳到压缩代码、Sources 面板看不到 webpack:// 或 vite:// —— 全是 sourceMap 没生效的典型表现，和构建配置强相关。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Webpack 项目确保
devtool: 'source-map'或'inline-source-map'（后者更稳，免路径解析） - Vite 项目检查
build.sourcemap: true（开发模式默认开启，但 build 后需手动配） -
"webRoot"应指向源码根目录，比如"${workspaceFolder}"；若源码在src/下，而构建输出在dist/，别误设成"${workspaceFolder}/dist" - 必要时加
"sourceMapPathOverrides"，例如 Vite 默认生成vite:///src/...，可映射为"vite:///src/*": "${webRoot}/src/*"
Chrome 必须带参数启动，不能双击图标
VS Code 调试器靠 Chrome 的远程调试协议通信，没开 --remote-debugging-port 就连不上，报错 Could not connect to localhost:9222。
- 关掉所有 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是必须项，否则拒绝启动） - 端口可改（如 9223），但要同步更新
launch.json中隐含的默认端口（"pwa-chrome"默认连 9222，不显式声明"port"字段时）
最易被忽略的是构建工具输出的 sourceMap 路径与 sourceMapPathOverrides 不匹配——哪怕其他全对，断点也会灰掉。建议先在 Chrome DevTools 的 Sources 面板里手动确认能否展开 vite:// 或 webpack://，再回头调 VS Code 配置。
