VS Code: “Breakpoint ignored because generated cod

Question

I have looked everywhere and I still have issue debugging TypeScript inside VS Code. I have read this thread but still I am not able to hit my breakpoints placed inside a TypeScript file, hitting the breakpoints in .js files all works fine.

So here is the simplest "hello world" project I have set up.

• app.ts:

  var message: string = "Hello World";
  
  console.log(message);
  

• tsconfig.json

  {
      "compilerOptions": {
          "target": "es5",
          "sourceMap": true
      }
  }
  

• launch.json

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Launch",
              "type": "node",
              "request": "launch",
              "program": "${workspaceRoot}/app.js",
              "stopOnEntry": false,
              "args": [],
              "cwd": "${workspaceRoot}",
              "preLaunchTask": null,
              "runtimeExecutable": null,
              "runtimeArgs": [
                  "--nolazy"
              ],
              "env": {
                  "NODE_ENV": "development"
              },
              "externalConsole": false,
              "sourceMaps": true,
              "outDir": null
          }
      ]
  }
  

I have generated the js.map files by running the tsc --sourcemap app.ts command.

After all of those steps when I set a breakpoint on the console.log(message); row and launch the program (F5) from the "Debug" tab that breakpoint is grayed out saying "Breakpoint ignored because generated code not found (source map problem?)." I attached a screenshot of what I am observing:

What am I missing?

Edit:

Hi, I am still stuck on this. I managed to make one sample project that was hitting the break points but after I tried to copy that project to a different location on my HDD the break points again became gray and were not hit. What I did different in this test project was to use inline sourcemaps by compiling the TypeScript files with tsc app.ts --inlinesourcemap

I uploaded the mentioned sample project to GitHub so you can take a look at it here.

Answer 1

I came across this question while looking for a solution to a similar problem that I was having. Despite being different from OP's problem, it might help others.

Context: I was following the Visual Studio Code HelloWorld example and found myself unable to stop on break points.

I solved my problem by changing .vscode/launch.json so that "sourceMaps": true attribute under the Launch configuration was set (it starts default on false).

Answer 2

outFiles": ["${workspaceRoot}/compiled/**/*.js"],

This saved my life, because TS wasn't looking for sub-dirs. Thanks a lot

Answer 3

yes! in my case changing this in launch.json file solve the problem:

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }

Answer 4

None of the other answers worked for me.

I then realised the program attribute in my launch.json was pointing to the .js file, but my project is a TypeScript project.

I changed it to point to the TypeScript (.ts) file, and set the outFiles attribute to point to where the compiled code lives:

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}/src/server/Server.ts",
    "cwd": "${workspaceRoot}",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
}

This solved the issue for me!

Answer 5

Facing the same issue and solved it by correcting "webRoot" config in launch.json. Here's my workspace's explorer view.

Since the compiling result main.js and main.js.map are in "./project/www/build" directory, I change the "webRoot" entry to "${workspaceRoot}/project/www/build" from "${workspaceRoot}", and it worked!

The launch.json file is as follow:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        }
    ]
}

Answer 6

There is really only one way to resolve this and that is to look at the source map path that is actually used.

Add the following line to launch.json:

"diagnosticLogging": true,

Among a lot of other stuff, your console will have lines like these:

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*"

And then you just tweak your sourceMapPathOverrides to make the path match to your actual source path. I've found that I needed slightly different configuration for different projects, so understanding how to debug this really helped.