Source Maps with webpack in Chrome

Developing without source maps can be painful. You just shouldn't have to endure that sort of thing. To top that, there isn't much worse that having to sift through minified code and guess at what is causing your mysterious errors on production. Do yourself and your team a favor! Turn those source maps on for development and make sure you have them enabled in production.

If you are running into troubles with getting source maps working with Webpack (especially if you're experience problems with source maps in Chrome), this is what has been working for me. This is one of those things that has tripped me up several times and counting so I figure I better get it out there on the Internet so that others (and myself) can stumble onto it in a moment of weakness.

Short version:

  • For development, I set devtool to 'eval-source-map'
  • For production, I set devtool to 'source-map'
  • Do NOT provide CLI flags such as -d or -p

Run command such as:

webpack  

With a webpack.config.js such as:

const config = {  
  // ...
  devtool: 'source-map',
  // ...
}

Lessons learned:

1) Warning: Mixing and Matching webpack CLI flags and webpack configs will result in fire.

Make sure you either

If you attempt to do both, then you'll end up like me:

Fool me once, shame on you

Fool me twice, shame on me! Really, I should be ashamed! I better make a note about it this time...

2) Getting source maps to work in Chrome

There are a number of open GitHub issues surrounding this. If you want to dive into that and find out more, here is a good starting point: Source Maps don't work on Chrome #2145

This is a tricky one, that I've somehow had to wrestle a few different times. Apparently, there are some issues with Chrome and source maps. I can't say for sure how specific this is to webpack, but here is what worked for me:

REMEMBER: DO NOT MIX AND MATCH CLI FLAGS WITH CONFIG FOR devtool THE CLI FLAGS WILL WIN

  • For development, I set devtool to 'eval-source-map'
  • For production, I set devtool to 'source-map'

Example:

const config = {  
  // ...
  devtool: 'source-map',
  // ...
}

Let's Do Some Console Debugging!

Here is a look at some console debugging output with various webpack source map settings. Using this index.js importing a few dummy modules. Notice that the console.log statements are logging out the expected filename.js:line-number.

This is using webpack 2.2.0, but if I recall correctly these same issues were present when using 1.x and this is more of an issue with Chrome than a webpack-specific issue.


👎 Naked: Using webpack (with no devtool setting or CLI flag)

Have fun debugging raw bundle.js :)


👎 Okay: Using webpack -d (the development CLI shortcut)

Filenames are there, but line numbers don't match. This trivial example doesn't look so bad, but on a larger project this becomes much more of an issue.


👍 Better: Using webpack with devtool set to eval-source-map (for development)

Accurate filenames and line numbers for the line in question (not all the way down the stack trace)


👍 Best: Using webpack with devtool set to source-map (for production)

Beautiful (and correct) filenames and line numbers all the way down the stack trace.


I experimented with a few of the other devtool options, and these seem to be the best options for Chrome for now. If you've come across something that works better for you, I'd be interested to hear about it!

Erik Aybar

Read more posts by this author.

comments powered by Disqus