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

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 2

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 }

Answer 3

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

Answer 4

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

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

Answer 6

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