Answer a question

I have debugger for chrome extension installed. I run my app using

webpack-dev-server -d --config webpack.dev.js --inline

I'm running a react app, all source codes are under /src folder. I have js, ts and tsx files. When I put a breakpoint on render function, editor properly breaks execution, but when I put a breakpoint to an onClick event of a button, it doesn't break, it just continues the execution of the code.

related part of my webpack config is as follows:

  mode: 'development',
  devtool: 'source-map',
  entry: {
    bundle: [
      '@babel/polyfill',
      'react-hot-loader/patch',
      `webpack-dev-server/client?http://${host}:${devPort}`,
      'webpack/hot/only-dev-server',
      path.resolve(__dirname, 'src/index.js'),
    ],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: '[name].[hash:16].js',
    chunkFilename: '[id].[hash:16].js',
  },
  devServer: {
    inline: true,
    port: devPort,
    contentBase: path.resolve(__dirname, 'public'),
    hot: true,
    writeToDisk: true,
    publicPath: '/',
    historyApiFallback: true,
    host,
  }

and my launch.json is as below:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///./src/*.js": "${workspaceRoot}/src/*.js",
    "webpack:///./src/*.tsx": "${workspaceRoot}/src/*.tsx",
    "webpack:///./src/*.ts": "${workspaceRoot}/src/*.ts",
    "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
  }
}

What I'm missing?

Answers

I got this to work by using inline-source-map in my config file:

{
    devtool: 'inline-source-map',
    // ....
}

Now it works properly and breaks wherever I put the breakpoint.