VSCode调试前端必须安装Debugger for Edge扩展并配置launch.json：type设为"pwa-chrome"，url与浏览器地址栏完全一致，webRoot指向源码根目录；Chrome需命令行启动并暴露调试端口，否则断点变空心圆。
launch.json，否则断点不命中、调试器连不上、空心圆满屏——不是代码问题，是通道没通。
必须用 Debugger for Edge，不是 Debugger for Chrome
VS Code 1.80+ 已彻底弃用 type: "chrome"，只认 type: "pwa-chrome"，而这个 type 由 Debugger for Edge 扩展提供支持（它同时兼容 Chrome/Edge/WebView2）。装错插件的典型表现：Unable to launch browser: unknown error，且无任何提示。
- 卸载所有含 “Chrome Debugger”、“legacy” 或版本号带
v4.x的插件 - 在 VS Code 扩展市场搜索并安装 Debugger for Edge（发布者必须是
Microsoft） - 安装后右下角状态栏应显示 “Debugger for Edge 已启用”
launch.json 三个字段必须严格匹配
断点变空心圆？99% 是这三个字段之一没对齐：
-
type必须是"pwa-chrome"（不是"chrome"，不是"pwa-edge"） -
url必须和浏览器地址栏**完全一致**：协议（http://）、端口（:5173）、路径（/login末尾有无斜杠）、哈希（#home）都得一模一样 -
webRoot指向你编辑的源码根目录，比如"${workspaceFolder}/src"；若项目是src/写代码、dist/输出，但dist/index.html引的是./js/app.js，那webRoot就得设成"${workspaceFolder}/src"，再配sourceMapPathOverrides
Chrome 必须用命令行启动并暴露调试端口
双击图标打开的 Chrome 默认关闭远程调试协议，VS Code 连不上就会卡在 Could not connect to localhost:9222——这不是配置问题，是 Chrome 根本没暴露接口。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 先关掉所有 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是必须的，否则 Chrome 拒绝以调试模式复用主配置 - 如果
9222被占，可换为9223，但仅当request: "attach"时才需同步改launch.json中的port字段
Source map 映射失败是常见隐形坑
你在 .vue 或 .ts 文件里打了断点，结果停在压缩后的 app.js 里？那是 source map 没正确生成或映射。Vue/Vite/React 项目默认开，但要注意：
立即学习“前端免费学习笔记（深入）”；
- Vite 项目确保
vite.config.ts中build.sourcemap为true（开发环境默认开，生产环境默认关） - Vue CLI 项目检查
vue.config.js中configureWebpack.devtool是否设为'source-map'或'cheap-module-source-map' - 若 webpack 构建路径和本地路径不一致（比如
webpack:///src/...→${workspaceFolder}/src/...），必须加sourceMapPathOverrides字段，例如："webpack:///src/*": "${webRoot}/*"
sourceMappingURL 注释的 JS 文件，且该注释指向的 .map 文件能被浏览器成功请求到（可在 Chrome Network 面板过滤 .map 查看 404）。否则 VS Code 看不见原始代码位置，断点自然失效。 
