Skip to content

Source Maps don't work on Chrome #2145

@bolismauro

Description

@bolismauro

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 Chrome 40 doesn't recognized source map urls produced with #eval #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.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions