Debugging Node.Js on VSCode for FrontEnd build pipeline

The habit of debugging issues using breakpoints are comparatively less in Frontend Developement due to either nature of the issue or historic reasons. The ecosystem of Node.Js is predominantly used by Frontend devs. Many developers still rely on crude methods of printing values in console. Due to rapidly evolving frameworks, the toolings are not able to keep up with the speed. This article focuses on a versatile and reliable tool in VSCode.

Debug config for jest:

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    // JEST
    {
      "name": "Jest",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand",
        "--verbose",
        "-c",
        "jest.config.js",
        "--colors",
        "${file}"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Similarly for QUnit, the config to debug current test file is:

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    // QUNIT
    {
      "name": "qunit",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceRoot}/node_modules/.bin/qunit",
      "runtimeArgs": [
        "--inspect-brk",
        "${file}"
      ],
    }
  ]
}

Broccoli

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    // BROCCOLI
    {
      "name": "broccoli",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/broccoli",
        "build"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

TypeScript:

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    // TYPESCRIPT
    {
      "type": "node",
      "request": "launch",
      "name": "ts-node",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ],
      "runtimeExecutable": "ts-node"
    }
  ]
}