VSCode 无法将 console.log 输出到 Debug Console，因其仅响应手动输入表达式或 debugger 暂停上下文求值；调试需用 pwa-chrome 类型、正确配置 webRoot 和 sourceMapPathOverrides，并针对 popup/SW/content script 等独立上下文分别处理。
VSCode 无法“打通”Chrome 控制台——它不接管、不镜像、也不转发 console.log 到 Debug Console；所谓“打通”，本质是让 VSCode 能在正确上下文中设断点、读变量、触发 debugger，而控制台本身始终在 Chrome 里。
为什么 console.log 不出现在 VSCode 的 Debug Console 里
前端调试中，console.log 默认输出到 Chrome DevTools → Console 面板，不是 VSCode 的 Debug Console。Debug Console 只响应你手动输入的表达式（比如在断点暂停后敲 user.name），或 debugger 触发的暂停上下文求值。
- 你在 popup 页面里写
console.log("popup loaded")，它只会出现在 popup 的 DevTools Console 中 - 你在 service worker 里写
console.log("SW installed")，它只出现在chrome://extensions→ “inspect views: service worker” 的 Console 里 - Debug Console 里敲
console.log("test")是能执行的，但它运行在调试器会话的 eval 上下文中，不等价于页面 JS 执行环境
launch.json 中 type 必须是 pwa-chrome，不是 chrome
VSCode 1.78+ 已废弃 "type": "chrome"。写错会导致调试适配器注册失败，断点变空心圆、attach 无响应。
- 必须用
"type": "pwa-chrome"，它同时支持 Chrome 和 Edge（Chromium 内核） - 旧教程里的
"type": "pwa-msedge"在当前版本已不识别，别抄 - 对应插件必须是 Microsoft 官方的 Debugger for Edge，不是已停更的 Debugger for Chrome
service worker 断点不生效？先唤醒再断点
v3 的 service worker 是事件驱动、冷启动的，没有常驻进程。VSCode 无法“监听等待”，必须手动触发加载并确保断点落在事件处理器内部。
- 扩展加载后，必须打开
chrome://extensions→ 找到你的扩展 → 点击inspect views: service worker，这时 SW 才真正启动并建立调试连接 - 断点不能打在文件顶层，得设在
chrome.runtime.onInstalled.addListener(() => { /* breakpoint here */ })这类回调里 - 改了 SW 代码后，必须调用
chrome.runtime.reload()或禁用/启用扩展，否则浏览器仍运行旧缓存版本
webRoot 和 sourceMapPathOverrides 错了，断点永远不命中
这是最隐蔽也最常踩的坑：VSCode 找不到源码映射路径，就只能在压缩后代码上设断点，而你根本看不到原始行。
-
webRoot必须指向你源码所在目录，比如"${workspaceFolder}"或"${workspaceFolder}/src"，不是"${workspaceFolder}/dist" -
sourceMapPathOverrides必须匹配构建工具生成的 sourcemapsources字段，例如 Vite 默认是["vite:///src/main.ts"]，就得写"vite:///src/*": "${webRoot}/src/*" - content script 的
webRoot和 popup 的可能不同，建议按脚本类型拆配置，避免混用
真正难的从来不是配置 launch.json，而是理解 Chrome 扩展每个运行环境（popup/SW/content script）都是独立 JS 上下文，它们之间不共享全局作用域，也不共用一个调试连接入口。漏掉一次手动 inspect、写错一行 sourceMap 映射、或者忘了 reload SW，断点就彻底失效——这些细节不会报错，只会静默跳过。
