断点不触发。 “断点已设置但尚未绑定”。码头工人，NodeJS，VSCode

Question

我无法正确调试我的 TypeScript 文件。问题是其他文件中的断点然后index.ts 不会被触发。 VSCode 对它们说“已设置断点但尚未绑定”。

如何让所有断点工作？

后端/index.ts

import { myCoolFunctionFromOtherFile } from "helpers/file2.ts";
// ...

app.get("/", (request, response) => {
    console.log("this breakpoint triggers successfully"); // <-- breakpoint triggers
    myCoolFunctionFromOtherFile();
});

后端/helpers/file2.ts

export const myCoolFunctionFromOtherFile = () => {
    console.log("This breakpoint will not be triggered"); // <-- Breakpoint will not break. VSCode says "Breakpoint set but not yet bound".
};

后端/Dockerfile

FROM node:13-alpine

RUN mkdir /app

WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY . /app

EXPOSE 3000
EXPOSE 9229

ENTRYPOINT ["npm", "run", "debug"]

后端/package.json

"scripts": {
    "debug": "ts-node-dev --poll --inspect=0.0.0.0:9229 --respawn index.ts", // I also tried nodemon, but could not get either to work
    
   

launch.json

"configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Docker",
            "protocol": "inspector",
            "port": 9229,
            "restart": true,
            "localRoot": "${workspaceFolder}/Backend",
            "remoteRoot": "/app",
            "sourceMaps": true,

        }
    ]

fyi：尝试在没有 docker 的情况下进行本地调试（直接在我的机器上运行脚本）时，调试工作正常。所以我认为这是一些配置错误。

编辑 1

添加 tsconfig.json

启用 inlineSourceMap 和 inlineSources

同样在 launch.json 中启用 sourceMaps

后端/tsconfig.json

{
    "compilerOptions": {
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "lib": ["es6", "dom"],
        "module": "commonjs",
        "outDir": "build",
        "resolveJsonModule": true,
        "rootDir": "source",
        "strict": true,
        "target": "es5",
        "inlineSourceMap": true,
        "inlineSources": true
    },
    "include": ["source"]
}

Answer 1

您需要在 tsconfig 中启用源映射并确保您的启动配置 launch.json 具有值 "sourceMaps" : true

你的tsconfig 应该是这样的

{
  "compileOnSave": false,
  "preserveWhitespaces": "off",
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",

    "sourceMaps": true, // add this instead it will generate .map files which you need to tell your launch.json where they are 
    // "inlineSourceMap": true, // remove this
    // "inlineSources": true, // remove this too
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "esnext"
  }
}

还有你的launch.json

"configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Docker",
            "protocol": "inspector",
            "port": 9229,
            "restart": true,
            "localRoot": "${workspaceFolder}/Backend",
            "remoteRoot": "/app",
            "sourceMaps": true // set to enable sourcemaps
            // and if you have any webpack or anything else setup, map them properly with these settings 
            "sourceMapPathOverrides": {
                "meteor://?app/*": "${workspaceFolder}/*",
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
                "webpack://?:*/*": "${workspaceFolder}/*"
            },
        }
    ]

阅读更多关于如何调试 Typescript 代码here