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

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
        }
    ]
}

Answer 2

Update: TypeScript debugging is now added in 0.3.0 Update: Always clear your breakpoints, then attach, then add breakpoints. This is a bug and has been reported.

Answer 3

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.

Answer 4

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.

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