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 Ty

Answer 1

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 2

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.

Answer 3

Late to the party, but you can check this post on github Test globbing support for the outFiles attribute in the launch config #12254.

Basically in the new version of vscode, you must now use the glob pattern with the property outFilesin your task.json.

I had a simlar issue. I fixed by indicating the output dir with outFiles

Answer 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",

Answer 5

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 6

This config in launch.json worked:

{ "type": "node", "request": "launch", "name": "Launch Program - app", "program": "${workspaceRoot}/src/server.ts", "cwd": "${workspaceFolder}", "outFiles": ["${workspaceRoot}/release/**"], "sourceMaps": true }