VSCode调试Edge前端项目核心是安装Debugger for Edge插件、配置type为"pwa-msedge"、确保Edge已安装且开发服务（如vite）正在运行；Firefox则须禁用第三方插件，改用内置JavaScript Debug Terminal并通过about:config启用远程调试。
VSCode 调试 Edge 或 Firefox 前端项目，核心不是“选哪个浏览器”，而是“用对插件 + 配对 type + 确保服务在跑”——Edge 可直接用官方 Debugger for Edge 插件，Firefox 则必须用内置的 JavaScript Debug Terminal（无需额外插件），且不能依赖旧式 launch.json 的 firefox 类型。
Debugger for Edge 插件怎么配才能真连上 Edge
Debugger for Edge 是微软官方维护的调试器，它同时支持 Edge、Chrome 和 WebView2，但不支持 Firefox。很多人装了插件却断点不生效，问题往往出在配置项和运行前提上：
-
type必须写"pwa-msedge"（Edge）或"pwa-chrome"（Chrome），"msedge"或"chrome"会静默失败 -
url必须是真实可访问的 HTTP 地址，比如"http://localhost:5173"；写成"file://"协议时，fetch、localStorage 等 API 会受限，且需手动加webRoot - Edge 浏览器本身必须已安装（哪怕你平时不用它），Debugger for Edge 依赖其底层调试协议，不是“假装连上”
- 启动调试前，务必确认开发服务已在终端中运行（如
vite、npm run dev），VSCode 不会帮你启动服务
Firefox 调试为什么不能装“Debugger for Firefox”插件
VSCode 从 1.80+ 版本起，已移除对第三方 Firefox 调试插件的支持。现在调试 Firefox 的唯一可靠方式是启用内置的 JavaScript Debug Terminal（默认开启），它通过 Firefox 的远程调试协议直连，无需额外扩展：
- 不要搜索安装任何叫 “Debugger for Firefox” 或 “FireFox Debugger” 的插件——它们已失效或不兼容
- 确保 Firefox 已开启远程调试：在地址栏输入
about:config→ 搜索devtools.debugger.remote-enabled→ 设为true - 启动调试时，不要用
launch.json配type: "firefox"，那会报错或无响应；改用 VSCode 内置的“附加到进程”模式 - 操作路径：
Ctrl+Shift+P→ 输入Debug: Attach to Node Process→ 实际弹出的是 Firefox 进程列表（需 Firefox 已打开目标页面）
launch.json 里 sourceMapPathOverrides 怎么填才不翻车
Vue 3 / React / Vite 项目构建后生成的 source map 路径和原始源码位置不一致，会导致断点打在压缩代码里、变量显示为 Proxy、ref.value 看不到值——这时靠 sourceMapPathOverrides 显式映射：
立即学习“前端免费学习笔记（深入）”；
- Vite 默认 source map 中路径前缀是
webpack:///./src/，但实际源码在${workspaceFolder}/src/，应写："webpack:///./src/*": "${workspaceFolder}/src/*" - Vue CLI 项目常用
webpack:///src/→ 映射为"webpack:///src/*": "${workspaceFolder}/src/*" - 如果用了别名（如
@/components），还需在jsconfig.json或tsconfig.json中配好compilerOptions.paths，否则 VSCode 找不到引用文件 - 更省事的做法：Vite 项目在
vite.config.ts中设build.sourcemap = 'inline'，把 map 内联进 JS，避免路径解析失败
断点变空心圆？先查这三件事
空心圆 = VSCode 认为“这行代码没被加载进来”，不是代码写错了，而是调试链路卡在某个环节：
- 浏览器地址栏左上角有没有小虫图标 ✅？没有说明调试器根本没连上，回头检查插件是否启用、
type是否拼错、端口是否被占 - 打开浏览器 DevTools → Sources 面板，能不能看到
webpack://或vite://下的源码？看不到，说明 source map 没生成或路径错，去构建配置里开devtool或sourcemap - VSCode 左下角状态栏有没有显示当前调试器类型（如 “pwa-msedge”）？没有可能是 launch.json 放错位置（必须在项目根目录
.vscode/launch.json），或配置语法有误（JSON 多逗号、引号不对）
真正容易被忽略的点是：Firefox 调试不走 launch.json，Edge 调试必须用 pwa- 前缀 type，而所有调试都依赖你手动开着服务——VSCode 从不替你执行 npm run dev，它只负责连，连不上就安静失败。
