VS Code: "Breakpoint ignored because generated code not found" error

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.

Solution 1

Setting "outFiles" : ["${workspaceRoot}/compiled/**/*.js"] solved the issue for me.

"outFiles" value should match one set in tsconfig.json for outDir and mapRoot which is ${workspaceRoot} in your case, so try "outFiles": "${workspaceRoot}/**/*.js"

Here are my tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6",
        "outFiles": ["${workspaceRoot}/compiled/**/*.js"],
        "mapRoot": "compiled"
    },
    "include": [
        "app/**/*",
        "typings/index.d.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

and launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/compiled/app.js",
            "cwd": "${workspaceRoot}",
            "outDir": "${workspaceRoot}/compiled",
            "sourceMaps": true
        }
    ]
}

Here is small project, where you may see all parameters set https://github.com/v-andrew/ts-template

Solution 2

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).

Solution 3

I think the problem might be in your 'program' section of launch.json. Try it like this:

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch",
    // Type of configuration.
    "type": "node",
    "request": "launch",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/app.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program.
    "args": [],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "${workspaceRoot}"
}

Solution 4

After ripping my hair out all day, I finally got it to work.

The problem is there's three files to fiddle with - launch.json, tsconfig.json, and webpack.config.js so it's all combinatorial.

the diagnosticLogging was key to helping me figure it out.

Microsoft please make this easier... Really, vscode could have figured this out or at least guided me more on the process.

Anyway here's what finally worked in my launch.json:

"url": "http://localhost:8080/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" }

my tsconfig.json:

"outDir": "dist",
"sourceMap": true

my webpack.config.js:

output: {
   path: 'dist/dev',
   filename: '[name].js'
},
...
module: {
    loaders: [...],
    preLoaders: [{
        test: /\.js$/,
        loader: "source-map-loader"
    }]
}
...
plugins: [
    new webpack.SourceMapDevToolPlugin(),
    ...
],
devtool: "cheap-module-eval-source-map",

Solution 5

Facing the same issue and solved it by correcting the path to .ts files.
My project contains src and dist dirs and the problem was that the generated .map files didn't have the correct path to the src dir.

The fix - tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "sourceRoot": "../src"
    }
}

Initially, my sourceRoot was pointing to src and there is no src dir inside dist.

Also, sourceMaps should be set to true inside launch.json.

View more solutions

Comments

[Vladimir Amiorkov]

I changed the "program": "${workspaceRoot}/app.js" to "program": "${workspaceRoot}/app.ts" but still the breakpoint in the .ts file is not being hit, only the one in the .js file is being hit.

[Amid]

Can you follow the answer I gave in the following post: stackoverflow.com/questions/35606423/… Starting with checking paths in map.js file. It should help you to pinpoint the problem.

[Vladimir Amiorkov]

When running the sample project from that thread (github.com/7brutus7/stackoverflow) I do get a breakpoint in the .ts file. Unfortunately I am totally lost how that works in that project and not in my sampler project.

[Amid]

In your original code - do you use locally installed tsc or global (check tasks.json)? In the previous thread there where some issues with the global instance.

[Vladimir Amiorkov]

I use the global tsc, in the auto generated tasks.json it is set like this ""command": "tsc"" The tsc version is 1.8.7

[jwwishart]

This is a good summary of major issues. sourceMaps in launch.json is required as stated, but I just had an issue due to having changed my launch.json "program" value to point to a .js file instead of a .ts one. VS Code hit breakpoint.. Working again! Cheerz!

[M. Herold]

Thanks for sharing, for some reason I had to add that sourceMapPathOverride as well.

[Lucas]

diagnosticLogging is now deprecated... use trace instead.

[fool4jesus]

Please note: for me, sourceMaps did need to be set to true, but I also had to set outFiles as noted in the next answer.

[Frank Nocke]

Same here! Without, vscode stopped only on debugger; (well, at least that. As a litmus test to start with...). – with "outDir": "${workspaceRoot}/build" also breakpoints do work nicely... (so probably, vscode can't reveal source-side breakpoints on the build-side (which it is running, naturally) without...)

[surfmuggle]

Under windows using VSC 1.8.1 and Node.js 8.9.1 i had to make these changes launch.json: "outFiles": [], instead of outDir": "${workspaceRoot}/compiled", and i had to switch from "program": "${workspaceRoot}/app.js", to "program": "${workspaceRoot}\\app.js", so \ instead of /.

[Michael Tiller]

I spent so much time working on this and your tip about sourceRoot turned out to be the solution. Ugh! I wish this wasn't so hard to get working. I wish when you run tsc --init the comment associated with the sourceRoot field as more descriptive and explained what structure it actually expects for the files so you could figure out what the right value was. In any case, THANKS!

[Axonn]

outFiles functionality has changed as of September 2020. See github.com/microsoft/vscode/issues/107615