Debugging mocha tests with babel in Visual Studio Code

Question

I am attempting to debug tests written in es6 in Visual Studio Code however the line numbering is all wrong: the break points work and I can step through the code but the highlighted line is on the wrong line.

The code I am seeing in Visual Studio Code is the es6 source code not the es5 babel is configured to output. The line numbering seems to line up with what I imagine the es5 code would look like.

Here is my Visual Studio Code configuration, note I have set sourceMaps to true and outDir to null as recommended in this question but it still does not work:

{
  "version": "0.1.0",
  // List of configurations. Add new configurations or edit existing ones.  
  // ONLY "node" and "mono" are supported, change "type" to switch.
  "configurations": [
    {
      // Name of configuration; appears in the launch configuration drop down menu.
      "name": "Debug mocha",
      // Type of configuration. Possible values: "node", "mono".
      "type": "node",
      // Workspace relative or absolute path to the program.
      "program": "${workspaceRoot}\\node_modules\\mocha\\bin\\_mocha",
      // Automatically stop program after launch.
      "stopOnEntry": false,
      // Command line arguments passed to the program.
      "args": [
                "test/.setup.js",
                "--reporter", "list",
                "--compilers", "js:babel/register",
                "--recursive", "./src/**/*.spec.js", "./src/**/*.integrationSpec.js", "./test/**/*.spec.js"
            ],
            // Ensure use sourcemaps generated by babel
            "sourceMaps": true,
      // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
      "cwd": "${workspaceRoot}",
      // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
      "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
      // Environment variables passed to the program.
      "env": {
                "NODE_PATH": "${workspaceRoot}\\src;${workspaceRoot}\\src\\framework\\core\\PageBuilder;${workspaceRoot}\\test\\testUtilities", 
                "NODE_ENV": "test"
            },
            "externalConsole": false,
            "outDir": null           

    }
  ]
}

I am using Visual Studio Code version 0.10.11. Node version 5.7.0 Mocha version 2.3.3

Answer 1

The following "launch.json" is working for me with mocha and babel:

{
  "type": "node",
  "request": "launch",
  "name": "Debug Mocha",
  "cwd": "${workspaceFolder}",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/mocha",
  "runtimeArgs": [
    "--require",
    "babel-polyfill",
    "--require",
    "@babel/register",
    "--recursive",
    "${workspaceFolder}/tests"
  ],
  "internalConsoleOptions": "openOnSessionStart"
}

To fix problems with the breakpoints stopping at the wrong lines, open your ".babelrc" file and add "sourceMaps" and "retainLines", mine looks like:

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": "inline",
  "retainLines": true,
}