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

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