调试器在转译文件上设置断点（VS Code、Node、ES6）

Question

我最近参与了一个混合了 ES5/6+ 代码的项目。 它使用 Babel 来编译一些较新的语法。

我想使用 Visual Studio Code 调试这个（断点等），但我遇到的问题是断点击中的是转译文件而不是我编写的源文件。

这是我的 package.json 文件：

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

这是我的 babel.config.js 文件：

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

最后，这是我的 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": [
        {
            "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"
        }
    ]
}

我发现的有关此问题的唯一帖子/问题有些过时并且没有太大帮助。

这是我已经看过的关于这个主题的内容：

• https://www.juandebravo.com/2019/05/20/debug-node-babel-docker/
• https://github.com/microsoft/vscode/issues/103556
• ES6 中的 JavaScript 开发与调试
• https://medium.com/@drcallaway/debugging-es6-in-visual-studio-code-4444db797954

任何帮助或解决此问题的方法将不胜感激。 提前致谢！

Answer 1

您必须生成源映射文件。 它们的目的是将源文件映射到生成的文件，调试器正在使用它们。

通过将devtool: 'source-map'设置添加到配置中来执行此操作