VS Code调试Chrome Extension时遇‘Cannot connect to the target’错误求助

尝试使用VS Code的Attach to Chrome配置调试Chrome扩展时，抛出错误：

Cannot connect to the target at localhost:9222: Could not connect to debug target at http://localhost:9222: Could not find any debuggable target

相关配置文件 #

launch.json 配置 #

{"version": "0.2.0","configurations": [{"name": "Attach to Chrome","port": 9222,"request": "attach","type": "chrome","webRoot": "${workspaceFolder}","url": "https://github.com/",},]}

manifest.json 内容 #

{"name": "Extension","description": "Some description","manifest_version": 3,"version": "1.0","devtools_page": "devtools.html","content_scripts": [{"matches": ["http://*/*","https://*/*"],"run_at": "document_idle","js": ["content_script.js"]}],"background": {"service_worker": "background.js"},"runtimeArgs": ["--load-extension=${workspaceFolder}"]}

已执行操作 #

• 在launch.json中设置了端口号9222
• 通过终端运行命令启用Chrome远程调试：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

以下是针对性的排查和修复步骤：

• 完全重启Chrome实例
  关闭所有Chrome窗口（包括后台进程），再重新用远程调试命令启动。未关闭的残留进程会导致新实例无法正常监听9222端口。

• 修正launch.json调试目标配置
  调试Chrome扩展无需指定url字段，需添加targetTypes明确目标类型。修改后的配置示例：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Attach to Chrome Extension",
        "port": 9222,
        "request": "attach",
        "type": "chrome",
        "webRoot": "${workspaceFolder}",
        "targetTypes": ["extension"]
      }
    ]
  }
  

• 在Chrome启动命令中直接加载扩展
  Manifest V3不支持runtimeArgs字段，需将加载扩展的参数加入启动命令：

  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --load-extension=/你的扩展本地绝对路径
  

  若终端已进入扩展目录，可替换路径为./。

• 验证远程调试端口状态
  在浏览器访问http://localhost:9222，能看到Chrome远程调试页面则端口正常；无法访问则检查启动参数是否生效，或端口是否被占用。

• 适配Manifest V3调试要求
  若调试后台Service Worker，需确保：

  1. Chrome扩展页面（chrome://extensions/）已开启开发者模式
  2. 扩展已成功加载，且点击"检查视图"能正常调出调试面板

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