如何在VSCode开发者工具中调试前端项目-VSCode-PHP中文网

vscode调试前端必须安装debugger for edge扩展并配置launch.json：type设为"pwa-chrome"，url与浏览器地址栏完全一致，webroot指向源码根目录；chrome需命令行启动并暴露调试端口，否则断点变空心圆。

如何在vscode开发者工具中调试前端项目

VSCode 本身没有“开发者工具”，它依赖浏览器的 DevTools 协议来调试前端项目；真正起作用的是 **Debugger for Edge**（微软官方维护）扩展 + 正确配置的 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% 是这三个字段之一没对齐：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

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 根本没暴露接口。

先关掉所有 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}/*"