CODEWITHSUNDEEP
reactjswebpackvisual-studio-codewebpack-dev-servervscode-debugger
Ahmet Cetin
Ahmet Cetin

Reputation: 3823

VSCode debugging on running webpack-dev-server, skips breakpoints

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?

Upvotes: 5

Views: 6585

Answers (3)

Ali Hussnain - alichampion
Ali Hussnain - alichampion

Reputation: 922

Another easy fix would be to add this configuration in launch.json and run your project before running the below debugger.

So what will happen in this config is it will open a new window in chrome with url you specified.

{
  "name": "Chrome",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/src",
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
},

Hope this is helpful!!

Upvotes: 0

Ahmet Cetin
Ahmet Cetin

Reputation: 3823

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.

Upvotes: 8

Angelo
Angelo

Reputation: 1473

I was facing the same issue with create-react-app. In webpack.config.js (after ejecting) I changed devtool: isEnvProduction? shouldUseSourceMap ? "inline-source-map" instead of "source-map" and now my breakpoints are constantly hitting!

Thanks for the tip!

Upvotes: 0

Related Questions