Source Maps don't work on Chrome

Hello everyone, I just started to use webpack and I’m having serious issues in debugging my code. The problem is that the Chrome debugger doesn’t work properly. I’m not sure if this is a webpack issue, a Chrome issue or my fault.

This is my webpack file

var webpack = require('webpack');

module.exports = {
  entry: [
    './app',
  ],
  output: {
    path: __dirname + '/assets',
    publicPath: '/assets',
    filename: 'app.js',
  },
  devServer: {
    contentBase: __dirname + '/assets',
    host: '0.0.0.0',
    port: process.env.PORT,
    historyApiFallback: true,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    }
  },
  cache: true,
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"',
    }),
  ],
  module: {
    preLoaders: [
    ],
    loaders: [
      {
        test: /\.js$/,
        include: [ __dirname ],
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  node: {
    fs: 'empty',
  },
};

By changing the devtool option I get different behaviours:

• eval: the debugger works correctly but the code is really hard to debug because I see the transpiled code
• source-map: When I set a brekpoint in a certain line, chrome often moves that breakpoint in another line. When I use the step over functionality, chrome shows me the wrong line even though the line where I stopped the execution was correct (usually the debugger moves the execution indicator where the function is declared)
• hidden-source-map: same as eval
• inline-source-map: same as source-map
• eval-source-map: The debugger adds the breakpoints on the correct line, but the execution never stops. This seems to be connected to #740
• cheap-source-map: same as eval
• cheap-module-source-map: same as source-map

I’ve tried to search both Chrome and Webpack related issues, changing browser or anything else it comes in my mind without success.

[AndreKR]

I just conducted a little experiment, which might be of interest here.

Chrome 57, webpack 2.3.3, babel-core 6.24.1, babel-loader 6.4.1, vue-loader 11.3.4

	Line numbers	File names	File names mappable	Breakpoints	Proper breakpoints	Breakpoints trigger
No source maps	Refer to the bundle	:white_check_mark:	:white_check_mark:	:white_check_mark:
eval & cheap-source-map	:x:	:white_check_mark:	:x:	:white_check_mark:	:white_check_mark:	:white_check_mark:
cheap-eval-source-map	:x:	:white_check_mark:	:x:	:white_check_mark:	:white_check_mark:	:x:
cheap-module-eval-source-map	:white_check_mark:	:white_check_mark:	:x:	:white_check_mark:	:white_check_mark:	:x:
cheap-module-source-map & cheap-module-inline-source-map :small_red_triangle: :tada:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
eval-source-map	:white_check_mark:	:white_check_mark:	:x:	:white_check_mark:	:x:	:x:
source-map	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:x: 1	:white_check_mark: 1
nosources-source-map	:white_check_mark: 2	:white_check_mark: 2	:white_check_mark:	:x:	:x:	:x:
inline-source-map :small_red_triangle:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:x: 1	:white_check_mark: 1

Notes:

• Line numbers = whether the line numbers are correct
• File names = whether the file names are correct
• File names mappable = Sometimes the correct file name is shown, but with a suffix (foo.js?a1b2:123). In this case Chrome cannot map the file to the filesystem so it cannot be edited in the Developer Tools. Note: Currently, when I set up a mapping, I can no longer use breakpoints, I haven’t found out the reason yet.
• Breakpoints = whether breakpoints can be set at all
• Proper breakpoints = sometimes breakpoints can be set, but only in certain lines, then this is marked false
• Breakpoints trigger = whether the set breakpoints actually trigger

¹ Breakpoints cannot be set properly, but set breakpoints do trigger. ² Of course the source only shows after the file has been mapped, but then line number and file name are shown correctly. 🔺 The inline-source-map and cheap-module-inline-source-map styles are not listed in this table.

[priyajeet]

I have this issue on OSX. Also, https://phabricator.babeljs.io/T6842