Strapi v4 debug breakpoints do not bind in VS Code

Questions and Answers
1
System Information
  • Strapi Version: 4.3.2
  • Operating System: Windows 10
  • Database:
  • Node Version: 16.16.0
  • NPM Version: 8.11.0
  • Yarn Version: 1.22.19

I want to be able to step through my “index.ts” in Strapi v4 for debugging purposes, but my breakpoints will not bind.

I followed the instruction from this “stackoverflow” post debugging-strapi-in-visual-studio-code, but it did not worked. Has anyone get the debug session working in VS code for Strapi v4? If so, would you be kind enough to share your approach step-by-step?

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Strapi v4 Debug",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/node_modules/@strapi/strapi/bin/strapi.js",
      "args": ["develop"],

      "autoAttachChildProcesses": true,
      "console": "integratedTerminal"
    }
  ]
}

StrapiV4-DebugVSCode
StrapiV4-DebugVSCode2025×771 153 KB

1 Like
2

I also had trouble with this due to the Typescript compilation. This is what worked for me:

// tsconfig.json
{
  "extends": "@strapi/typescript-utils/tsconfigs/server",
 
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
  },
  "include": [
    "./",
    "src/**/*.json"
  ],
  "exclude": [
    "node_modules/",
    "build/",
    "dist/",
    ".cache/",
    ".tmp/",
    "src/admin/",
    "**/*.test.ts",
    "src/plugins/**"
  ]
}

and

// launch.json > configurations
     {
        "name": "Strapi Develop",
        "request": "launch",
        "runtimeArgs": [
          "run-script",
          "develop"
        ],
        "sourceMaps": true,
        "runtimeExecutable": "npm",
        // I have multiple folders in the workspace
        "cwd": "${workspaceFolder}/backend",
        "skipFiles": [
          "<node_internals>/**"
        ],
        "type": "node"
      }
1 Like
3

With Typescript and Strapi v4.4.3 I just needed to add the “sourceMap”:true to the tsconfig.json file and then I could use the usual (at least for me) launch.json configuration for debugging Strapi:

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "npm run develop",
      "name": "Run npm develop",
      "request": "launch",
      "type": "node-terminal",
      "env": {
        "DATABASE_SSL": "false",
        "NODE_ENV": "development",
      }
    }
  ]
}
3 Likes
4

En: Nice, this solution worked for me
PT: Essa solução funcionou para mim

(v4.8.2)