VSCode调试Chrome扩展时source map不生效断点无法触发问题排查

核心配置错误 #

你当前的launch.json是普通网页调试的配置，不匹配Chrome扩展的调试场景，核心错误点如下：

• 指定的url: http://localhost:8291和扩展调试无关，如果你没有在本地启动8291端口的服务，这个地址打开就是无效的，扩展的background脚本运行在Chrome的扩展独立上下文，和普通网页上下文完全隔离。
• 多余的sourceMaps相关配置：你没有使用打包工具编译代码，纯手写原生JS不需要sourceMaps，开启反而会干扰VSCode的源码映射逻辑。
• 缺少远程调试端口配置：扩展调试需要开启Chrome的远程调试端口，才能让VSCode和Chrome的调试端口通信。

修复后的launch.json配置 #

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome for Extension Debug",
            "type": "chrome",
            "request": "launch",
            "runtimeArgs": [
                "--load-extension=${workspaceFolder}",
                "--remote-debugging-port=9222",
                "--no-first-run",
                "--no-default-browser-check"
            ],
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

调试操作步骤 #

1. 确认manifest.json配置正确：V3版本manifest要正确配置background.service_worker字段，V2版本要正确配置background.scripts字段，扩展无加载错误。
2. 按F5启动调试后，打开Chrome的chrome://extensions/页面，开启开发者模式，确认你的扩展已经被正常加载，没有报错提示。
3. 调试background脚本：从扩展管理页点击对应扩展的「Service Worker」（V3）或「背景页」（V2），打开扩展独立的开发者工具，就能找到background.js源码，断点会正常触发。
4. 调试content脚本：打开你在manifest中配置的content脚本注入目标页面，打开页面开发者工具，在「源」面板的「内容脚本」分类下就能找到content.js。

• sourceMaps是什么？是否需要手动生成？
  sourceMaps是代码映射文件，仅用于打包/编译/压缩场景下，将处理后的代码映射回原始手写源码，方便调试。你没有使用webpack、tsc等工具打包代码，不需要用到sourceMaps，也不需要手动生成，直接删除配置中相关参数即可。
• 配置中的localhost地址有什么作用？需要提前启动本地服务吗？
  这个地址是普通网页调试场景下，指定Chrome启动后自动打开的页面地址，必须和你本地启动的服务端口匹配才可以正常访问。如果只调试扩展的background脚本，可以直接删除这个配置；如果要调试content脚本，可以填你要注入脚本的目标页面地址。

内容的提问来源于stack exchange，提问作者ー PupSoZeyDe ー