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

【问题标题】：Debugger setting breakpoints on transpiled file (VS Code, Node, ES6)调试器在转译文件（VS Code、Node、ES6）上设置断点
【发布时间】：2026-02-19 05:15:01
【问题描述】：

我最近参与了一个混合了 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"
        }
    ]
}

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

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

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

【问题讨论】：

我的回答实际上是错误的我读你的问题太快了，还以为你在使用 webpack。哪个命令转换代码？是pre-commit 钩子吗？
不，预提交挂钩仅在提交/推送时运行。我猜没有转换代码的命令？

标签： javascript node.js ecmascript-6 babeljs vscode-debugger

【解决方案1】：

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

通过将devtool: 'source-map' 设置添加到配置来做到这一点

【讨论】：