Breakpoint does not trigger. "Breakpoint set but not yet bound". Docker, NodeJS, VSCode

Question

I can not debug my TypeScript files properly. The problem is that breakpoints in other files then index.ts do not get triggered. VSCode says "Breakpoint set but not yet bound" on them.

How can I get all breakpoints to work?

Backend/index.ts

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

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

Backend/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".
};

Backend/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"]

Backend/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: When trying to debug locally without docker (run the scripts directly on my machine), then debugging works correctly. So I think it's some configuration error.

Edit 1

Add tsconfig.json

Enable inlineSourceMap and inlineSources

Also enable sourceMaps in launch.json

Backend/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"]
}

tHeSiD · Accepted Answer · 2020-06-21 18:56:18Z

1

You need to enable source maps in your tsconfig and make sure your launch config launch.json has the value "sourceMaps" : true

Your tsconfig should look something like this

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

and your 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}/*"
            },
        }
    ]

Read more about how to debug Typescript code here

edited Jun 21, 2020 at 18:56

answered Jun 21, 2020 at 18:24

tHeSiD

5,5214 gold badges38 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sir hennihau Over a year ago

I enabled sourcemaps as you told, but unfortunately, it still doesn't work properly. At least I can now get a breakpoint to trigger in file2.ts, but the breakpoint somehow jumps to another position.

tHeSiD Over a year ago

Ah thats mainly due to inline sourcemaps, i updated the answer

Collectives™ on Stack Overflow

Breakpoint does not trigger. "Breakpoint set but not yet bound". Docker, NodeJS, VSCode

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related