Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Breakpoints in files in chrome not being hit when using webpack sourcemaps

I have a breakpoint in a source .js file (loaded via source maps) that when I point to in with chrome dev tools in source tab, it is not hit. Sometimes I can get them to be hit if I click the format button {} but its hit and miss.

Any ideas?

  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.1.20",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-1": "^6.3.13",
    "css-loader": "^0.23.1",
    "material-ui": "^0.14.0",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "tape": "^4.2.2",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.1.19",
    "moment": "^2.11.2",
    "normalize.css": "^3.0.3"
  }

webapck:

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.js'
  ],
  output: {
    publicPath: '/',
    filename: 'dist/main.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'app'),
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' }

    ]
  },
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".js", ".css",".styl"]
  }
};
like image 623
SuperUberDuper Avatar asked Feb 25 '16 20:02

SuperUberDuper


1 Answers

So this seems to be an issue with webpack and chrome in the past that was brought up.

The interim solution was to set it set the devtool option to source-map or inline-source-map but note, this will cause your compile time to increase.

As of Webpack 3 the issue has improved, but the problem is in the interplay between Chrome and Webpack with their changing code bases.

With Webpack 3 I've had success with the following configuration:

devtool: 'cheap-module-source-map'

like image 58
Paesano2000 Avatar answered Oct 12 '22 00:10

Paesano2000