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

18

81

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:

enter image description here

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.

Rident answered 15/3, 2016 at 8:45 Comment(0)
S
31

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

Slipshod answered 10/12, 2016 at 2:18 Comment(2)
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 /.Vivica
outFiles functionality has changed as of September 2020. See github.com/microsoft/vscode/issues/107615Fitter
N
17

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

Neilneila answered 1/5, 2016 at 14:49 Comment(2)
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.Dior
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...)Cajolery
T
6

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}"
}
Tenorio answered 15/3, 2016 at 9:11 Comment(5)
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.Rident
Can you follow the answer I gave in the following post: #35606923 Starting with checking paths in map.js file. It should help you to pinpoint the problem.Tenorio
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.Rident
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.Tenorio
I use the global tsc, in the auto generated tasks.json it is set like this ""command": "tsc"" The tsc version is 1.8.7Rident
D
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.

Devolve answered 7/8, 2016 at 11:28 Comment(2)
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!Deformity
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!Lacielacing
T
5

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",
Trochilus answered 14/2, 2017 at 6:37 Comment(2)
Thanks for sharing, for some reason I had to add that sourceMapPathOverride as well.Pandolfi
diagnosticLogging is now deprecated... use trace instead.Topside
C
3

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"
        }
    ]
}
Ciceronian answered 20/1, 2017 at 3:51 Comment(0)
N
2

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!

Nylon answered 15/4, 2017 at 10:53 Comment(0)
D
1

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.

Darladarlan answered 13/2, 2017 at 22:22 Comment(0)
B
1

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

Brandenburg answered 7/3, 2017 at 21:1 Comment(0)
F
1

After a lot of time wasted on resolving this issue, it turned out the best way is to turn on debugging trace by adding the following line in launch.json.

"trace": true

And see where the problem actually is. Your debug console will output something in the lines of:

Verbose logs are written to: /Users/whatever/Library/Application Support/Code/logs/blah/blah/debugadapter.txt

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

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

Use sourceMapPathOverride to fix it to actually match your path. The property "trace" used to be called "diagnosticLogging" which is no longer used.

Frown answered 23/11, 2018 at 10:10 Comment(0)
D
1

I changed my config in launch.json for:

{ "name": "Debug tests in Chrome", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "sourceMapPathOverrides": { "*": "${webRoot}/*" }, "webRoot": "${workspaceRoot}" }

before was:

{ "name": "Debug tests in Chrome", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" }

Include '"sourceMapPathOverrides"' was my solution

Dispersion answered 19/2, 2020 at 10:47 Comment(0)
S
0

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 }

Supernormal answered 25/10, 2017 at 14:20 Comment(0)
N
0

I would like to contribute to spare some hours of head banging.

I used Debugger for Chrome for VS code (you don't need this for webstorm), I would recommend spend 10min reading their page, it will enlighten your world.

After installing the debugger extension, make sure that source-map is installed, in my case I also needed source-map-loader. Check your package.json for that.

My launch.json which is the chrome debugger configuration (all my source files where under src) :

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}/",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

Add devtool: 'source-map' to your webpack.config.js. Other parameters that generates mapping inlines won't work with Chrome Debugger (they mention that on their page).

This is an example:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Tutorial",
      inject: "body",
      template: "src/html/index.html",
      filename: "index.html"
    }),
    new DashboardPlugin()
  ],
  devtool: 'source-map',  
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        query: {
          presets: ["es2017", "react"],
          plugins: ['react-html-attrs']          
        }
      }
    ]
  },
  watch: true
};

Then you run your webpack: `webpack-dev-server --devtool source-map --progress --port 8080, I used webpack-dev-server but it has same options as webpack.

When you do that you must see a .map file of your generated app. If not then come back and verify your setup.

Now in VS Code switch to Debug Console and run .scripts. This is a very useful command because it shows you what generated code is mapped to which source.

Something like this: - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

If this is wrong then you have to verify your sourceMapPathOverrides in your launch.json, examples are available on the extension's page

Nolitta answered 9/11, 2017 at 14:39 Comment(0)
S
0

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

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }
Subscript answered 22/5, 2018 at 3:55 Comment(0)
D
0

Using Angular I have found that I always point my folder directory to the src folder - that way my work-space is not so cluttered with root files that I never use. But this has given me several problems in the past especially when using VSCode, since many of the functionality seems to me to look at the folder structure, and start from there to run your files. (Expecting some of the missing files)

So I had this exact same problem with this error message, and learning from past experience I realized that I opened my project one folder deep, instead of the root <app name> folder. So I just closed my project and opened it one folder up (so that all the other files are also included in the folder structure) and my problem was immediately fixed.

I also believe that many of the above answers about changing your files and folder structure are workarounds to this problem of not opening your work project at the root folder, what ever framework/language you are using.

Durga answered 28/5, 2018 at 7:52 Comment(0)
M
0

I just had to restart my express server and then reattach the debugger.

Misti answered 18/5, 2020 at 17:16 Comment(0)
F
0

After reading this thread and trying almost all methods I could find to no avail, I Google'd some more and stumbled upon this weeery interesting change they made in VSCode 1.49.0, in September 2020. In a nuthshell, outFiles does not work as before.

https://github.com/microsoft/vscode/issues/107615

Fitter answered 31/12, 2020 at 2:54 Comment(0)
P
-2

if you switch to visual studio type script project you can debug ts files normally i think the issue in app.js.map generation file here is sample from visual studio app.js.map

{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["HelloWorld","HelloWorld.constructor"],"mappings":"AAAA;IACIA,oBAAmBA,OAAcA;QAAdC,YAAOA,GAAPA,OAAOA,CAAOA;IAEjCA,CAACA;IACLD,iBAACA;AAADA,CAACA,AAJD,IAIC;AAED,IAAI,KAAK,GAAG,IAAI,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC/C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC"}

vs visual studio code app.js.map

{"version":3,"file":"app.js","sourceRoot":"","sources":["../app.ts"],"names":[],"mappings":"AACA;IACI,oBAAmB,OAAc;QAAd,YAAO,GAAP,OAAO,CAAO;IAEjC,CAAC;IACL,iBAAC;AAAD,CAAC,AAJD,IAIC;AACD,IAAI,KAAK,GAAC,IAAI,UAAU,CAAC,aAAa,CAAC,CAAC;AACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAC3B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC"}

try to replace it and try again don't forget to consider directory hierarchy of sources

Piled answered 24/3, 2016 at 9:4 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.