調試器在轉譯文件上設置斷點（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'設置添加到配置中來執行此操作