Debugger setting breakpoints on transpiled file (VS Code, Node, ES6)

Question

I have recently been put on a project that has a mixture of ES5/6+ code. It uses Babel for compilation of some of the newer syntax.

I'd like to debug this (breakpoints etc.) using Visual Studio Code, but the problem I am having is that the breakpoints are hitting the transpiled files instead of the source files that I write.

Here is my package.json file:

{
  "name": "xxxxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prestart": "npm install",
    "start": "node index.js",
    "test": "jest --collect-coverage --verbose",
    "lint": "eslint **/*.js",
    "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged --compilers js:babel-core/register --require babel-polyfill"
    }
  },
  "keywords": [
    "OAI"
  ],
  "license": "Unlicense",
  "private": true,
  "dependencies": {
    "aws-sdk": "^2.874.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "https": "^1.0.0",
    "js-yaml": "^3.14.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "mongoose": "^5.4.0",
    "oas-tools": "2.1.7",
    "request-promise": "^4.2.6",
    "uuid": "^3.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.13",
    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
    "@babel/preset-env": "^7.13.12",
    "@babel/register": "^7.13.8",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "chai": "^4.3.4",
    "eslint": "^6.8.0",
    "husky": "^6.0.0",
    "jest": "^26.6.3",
    "mocha": "^6.2.3",
    "nyc": "^14.1.1",
    "prettier": "2.2.1",
    "pretty-quick": "^3.1.0",
    "swagger-parser": "^8.0.3"
  }
}

Here is my babel.config.js file:

    module.exports = {
    presets: [["@babel/preset-env"]],
    plugins: ["@babel/plugin-proposal-optional-chaining"],
    sourceMaps: true 
};

And finally, here is my launch.json file:

    {
    // 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": [
        {
            "env": {
                "NODE_ENV": "development",
                "AWS_PROFILE": "xxxxxx",
                "PORT": "1171",
                // "NO_CACHE": "true",
            },
            "name": "Launch DEV",
            "outFiles": [
                "${workspaceFolder}/compiled/**/*.js"
            ],
            "program": "${workspaceFolder}/index.js",
            "request": "launch",
            "type": "node",
            "sourceMaps": true
            // "outputCapture": "std"
        },
        {
            "env": {
                "NODE_ENV": "qa",
                "AWS_PROFILE": "xxxxxx",
                "PORT": "1171",
                // "NO_CACHE": "true",
            },
            "name": "Launch QA",
            "outFiles": [
                "${workspaceFolder}/compiled/**/*.js"
            ],
            "program": "${workspaceFolder}/index.js",
            "request": "launch",
            "type": "node",
            "sourceMaps": true
            // "outputCapture": "std"
        }
    ]
}

The only posts/questions on this problem that I've found are somewhat dated and aren't too helpful.

Here is what I've already looked at on this topic:

• https://www.juandebravo.com/2019/05/20/debug-node-babel-docker/
• https://github.com/microsoft/vscode/issues/103556
• JavaScript Development in ES6 With Debugging
• https://medium.com/@drcallaway/debugging-es6-in-visual-studio-code-4444db797954

Any help, or a solution to this problem would be greatly appreciated. Thanks in advance!

Answer 1

You have to generate source maps files. Their purpose is to map the source files to generated files, and they are being used by the debugger.

Do this by adding the devtool: 'source-map' setting to the configuration