VS Code前端断点无效是因为调试器未连接目标页面，必须满足三个硬条件：type为"pwa-chrome"或"pwa-edge"；url与浏览器地址栏完全一致；webRoot指向源码根目录。
VS Code 本身不执行前端 JavaScript，断点只在浏览器中真正运行代码时触发；直接右键 HTML → “Open with Live Server” 或双击打开，VS Code 的断点完全无效。
为什么断点打了却没反应？
最常见原因不是操作错，而是调试器根本没连上目标页面。VS Code 调试前端 JS 本质是转发 Chrome/Edge 的 DevTools 断点，所以必须满足三个硬条件：
-
launch.json中type必须是"pwa-chrome"（新版）或"pwa-edge"，旧版"chrome"已弃用，写了就静默失败 -
url字段必须和你最终在浏览器地址栏看到的地址**完全一致**：协议（http://不是file://）、端口（:3000）、路径（/login末尾斜杠有无）、甚至哈希（#home）都要匹配 -
webRoot必须指向源码根目录，比如"${workspaceFolder}"；若项目结构是src/下写代码、dist/下部署，但你在dist/index.html里引用./js/app.js，那webRoot还得设成"${workspaceFolder}/src"并配sourceMapPathOverrides
launch.json 配置怎么写才可靠？
别抄网上过时模板。以下是最小可行配置（以 Chrome 为例），适用于 Vite / Webpack / 纯 HTML + script 场景：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"runtimeArgs": ["--no-sandbox", "--disable-web-security"]
}
]
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
request: "launch"自动拉起新 Chrome 实例，避免端口冲突；若你已手动启了带--remote-debugging-port=9222的 Chrome，才改用"request": "attach" -
url值必须和你实际开发服务器地址一致（Vite 默认5173，Webpack Dev Server 默认8080） -
runtimeArgs加--no-sandbox可绕过某些 Linux/macOS 权限问题；--disable-web-security仅调试时临时启用，解决跨域 fetch 失败导致页面白屏进不去的问题 - 不用手动指定
runtimeExecutable——VS Code 1.80+ 会自动找系统 PATH 里的 Chrome
断点变空心圆 / 灰色不可点怎么办？
这表示 VS Code 找到了断点位置，但没加载到对应的源码。常见于构建项目或外部脚本：
- 检查控制台输出：调试启动后，看 VS Code 的 Debug Console 是否打印
Loaded source map from …；若报 404，说明.map文件路径错或没生成 - Vite 用户：确认
vite.config.ts里build.sourcemap设为true，且开发模式下没被插件禁用 - Webpack 用户：把
devtool改成'source-map'或'inline-source-map'，别用'eval'类（断点只能打在压缩后代码上） - 引入 CDN 脚本（如
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>）：VS Code 默认不调试这类资源，断点必然失效；如需调试，得下载本地并用sourceMapPathOverrides映射
调试时容易忽略的底层事实
VS Code 的“调试”只是 Chrome DevTools 的图形壳子。所有行为都受浏览器侧限制：
- Chrome 设置里如果开了
Disable JavaScript，VS Code 断点彻底静默，不报错也不停 - 在 Chrome 的 Sources 面板里手动右键 →
Blackbox script了某个文件，VS Code 对应文件的断点立刻变灰失活 - 用了
eval()、Function()或内联<script>alert(1)</script>，且没 source map，断点只能设在生成后的字符串代码里，行号完全对不上 - F5 刷新页面时，
request: "launch"模式会重启整个 Chrome 进程；"attach"模式只刷新页面，断点保留——但后者要求你每次调试前都手动确保 Chrome 已用调试参数启动
