VSCode调试Chrome扩展需按popup、service worker、content script三类分别配置launch.json：popup用attach+urlFilter匹配popup.html；SW需手动唤醒并断点在事件监听器内；content script须确保已注入目标页且webRoot和sourceMap正确。
VSCode 调试 Chrome 扩展程序，核心不是“连上浏览器”，而是分类型加载、按角色断点、手动触发调试入口——否则你永远卡在 service worker 不启动、popup 断点不命中、content script 无法设断点。
如何配置 launch.json 让 VSCode 识别扩展的三类运行环境
Chrome 扩展 v3 拆成了 popup、content script、service worker 三种独立上下文，launch.json 不能只写一个 url 就完事。必须为每种类型单独配置调试入口，且类型名必须匹配：
-
"type": "pwa-chrome"是必须项（旧版"type": "chrome"已弃用，断点会失效） - popup 页面：用
"request": "attach"+"urlFilter": "chrome-extension://*/popup.html"，不能用launch，因为 popup 是用户点击才打开的 - service worker：必须用
"urlFilter": "chrome-extension://*/_generated_background_page.html"（v3 实际无 background.html，但 DevTools 仍用此路径标识 SW 上下文） - content script：无法直接 attach，需先在目标网页中注入后，再用
"urlFilter": "http://*/*"或具体域名匹配，且要确保webRoot指向 content script 源码目录
为什么 service worker 断点总不生效，甚至看不到调试面板
v3 的 service worker 是事件驱动、冷启动、无常驻进程的，它不会一直运行，也不会在扩展加载时自动激活。VSCode 断点打在 service-worker.js 文件里，但若没触发对应事件（如 chrome.runtime.onInstalled、chrome.tabs.onUpdated），SW 根本不会执行，VSCode 就找不到执行上下文。
- 首次加载扩展后，必须手动访问
chrome://extensions→ 找到你的扩展 → 点击inspect views: service worker，这时 SW 才被唤醒并建立调试连接 - 断点必须设在事件监听器内部，比如
chrome.runtime.onInstalled.addListener(() => { debugger; })，而不是文件顶层 - 如果改了 SW 代码，必须先
chrome.runtime.reload()或禁用/启用扩展，否则旧版本缓存仍在运行
popup 和 content script 调试失败的三个硬性前提
这两类脚本的调试依赖 Chrome 的“已加载上下文”存在，VSCode 只是附加（attach）进去，不是启动它。缺任何一个条件，断点就是空心圆。
- popup：必须先在地址栏输入
chrome://extensions→ 开启开发者模式 →加载已解压的扩展程序→ 然后**真地点击一次扩展图标**，弹出 popup 页面；之后 VSCode 才能通过urlFilter匹配到该页面并 attach - content script：必须确保
manifest.json中"content_scripts"的"matches"正确覆盖目标网页（例如"<all_urls>"</all_urls>或"https://example.com/*"），且该网页已手动打开；否则脚本根本没注入，VSCode 无处 attach - 所有脚本都必须开启 source map：
"sourceMaps": true在launch.json配置中显式声明，且构建工具（如 Vite、Webpack）输出的.map文件得和 JS 同目录，否则断点映射失败
常见错误现象与对应检查点
看到 Unable to launch browser: Could not connect to localhost:9222 或断点灰色，别急着重装插件——90% 是端口、路径或权限链断了一环。
-
Could not connect to debug port：Chrome 没加--remote-debugging-port=9222参数，或已有其他 Chrome 进程占着端口；用lsof -i :9222（macOS/Linux）或netstat -ano | findstr :9222（Windows）查占用进程 - 断点变空心圆：
webRoot指向错误（比如指向了dist而非src），或sourceMapPathOverrides里的路径模式和实际 sourcemap 中sources字段不匹配（可用 Chrome DevTools 的 Sources 面板看 mapped 文件路径来反推） - popup 打开即崩溃：检查
popup.html是否引用了未打包的本地 JS，v3 禁止eval和内联脚本，所有逻辑必须外链且带integrity属性（开发期可暂关 CSP，但调试时得留意控制台报错）
最易被忽略的是：每次改完 manifest.json 或 service worker 代码，都得手动在 chrome://extensions 点击「重新加载」，VSCode 不会自动同步这个动作。不重载，新断点永远进不去。
