ecmascript-6 - 在 Visual Studio Code 中使用 babel 调试 mocha 测试

Question

我正在尝试在 Visual Studio Code 中调试用 es6 编写的测试，但是行号全都错误:断点有效，我可以单步执行代码，但突出显示的行在错误的行上。

我在 Visual Studio Code 中看到的代码是 es6 源代码，而不是 es5 babel 配置为输出。行号似乎与我想象的 es5 代码的样子一致。

这是我的 Visual Studio Code 配置，请注意我已按照建议将 sourceMaps 设置为 true 并将 outDir 设置为 null in this question但它仍然不起作用:

{
  "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           

    }
  ]
}

我使用的是 Visual Studio Code 0.10.11 版。
节点版本 5.7.0
Mocha 2.3.3 版本

Answer 1

以下“launch.json”适用于 mocha 和 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"
}

要解决断点停在错误行的问题，请打开“.babelrc”文件并添加“sourceMaps”和“retainLines”，我的看起来像:

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