如何在VSCode中为Strapi插件配置断点调试？

1. 确认项目基础条件 #

• 确保Strapi项目通过官方脚手架生成，本地已安装node和npm/yarn，插件代码存放在src/plugins/[你的插件名]目录下。
• 检查config/plugins.js，确认目标插件已启用。

2. 配置VSCode调试文件（launch.json） #

• 打开VSCode的「运行和调试」面板（快捷键Ctrl+Shift+D），点击「创建launch.json文件」并选择「Node.js」环境。
• 将默认配置替换为以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Strapi Debug",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "develop"],
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "strapi*"
      },
      "console": "integratedTerminal",
      "restart": true,
      "protocol": "inspector",
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

• 说明：
  • 若使用yarn，将runtimeExecutable改为"yarn"，runtimeArgs改为["develop"]。
  • restart: true会在代码修改后自动重启调试进程，适配开发场景。
  • DEBUG参数可输出Strapi相关日志，辅助排查问题。

3. 启动调试并验证断点 #

• 打开插件代码文件（如src/plugins/[插件名]/controllers/xxx.js），点击行号左侧设置断点（红色圆点）。
• 在「运行和调试」面板选择「Strapi Debug」配置，点击绿色启动按钮。
• Strapi启动完成后，触发插件相关操作（如调用接口、操作后台面板），代码会停在断点处，此时可进行单步调试、变量查看等操作。

4. 常见问题排查 #

• 断点显示灰色空心圆点（未绑定）：
  • 检查config/plugins.js的插件配置是否正确，确保插件被Strapi加载。
  • 确认launch.json中protocol设置为inspector（Node.js 8+默认调试协议）。
  • 删除.strapi缓存目录后重新启动调试。
• 无法进入插件代码调试：
  • 确保插件是本地开发模式（存放在src/plugins），而非已打包的npm包。
  • 启动命令必须为develop，start命令运行生产环境代码，不会加载未打包的插件源码。

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