Webpack: Problems with Chrome debugging in dev with webpack

Created on 15 Feb 2017  路  5Comments  路  Source: vuejs-templates/webpack

By default, the generated webpack.dev.conf.js sets devtool: '#cheap-module-eval-source-map'. This causes problems with Chrome debugging because of https://github.com/vuejs/vue-cli/issues/51. Changing devtool in the generated webpack.dev.conf.js to #source-map solves the issue. Is there any way to control the devtool setting from index.js? I see that for production webpack config it is set to config.build.productionSourceMap ? '#source-map' : false.

Most helpful comment

I also faced issues while trying to debug in chrome with #cheap-module-eval-source-map. I was able to fix it by changing it back to #eval-source-map.

All 5 comments

I also faced issues while trying to debug in chrome with #cheap-module-eval-source-map. I was able to fix it by changing it back to #eval-source-map.

I found that I had to use #cheap-eval-source-map due to it ignoring the source maps from loaders. Unfortunately it is transpiled code, but... at least I can trouble shoot what is going on now. For more information on the possible options for devtool see: https://webpack.js.org/configuration/devtool/

I'm also experiencing this issue in Chrome using the default #cheap-module-eval-source-map and found it's corrected by using #cheap-eval-source-map.

But why was this issue closed @LinusBorg ? This thread and the others referenced don't provide any solution, just alternatives that apparently slow down compilation. Or did I miss something? If changing the devtool to #cheap-eval-source-map fixes this issue with no downside maybe vue-cli should be modified? I'm new-ish to Vue + Webpack so I could be misunderstanding...

  1. As you can read in the docs of webpack itself, source maps in chrome are generally wonky and nightmarish. They link this issue: https://github.com/webpack/webpack/issues/3165
  2. If something can be done to improve this general situation, it's not in this template repository
  3. I personally added #cheap-module-eval-sourcemap as a default to this template because it is a recommendation from the webpack docs and did work well for all tests that I did (around the time that I closed the issue), but that may differ for others because of 1.
  4. I closed the issue since a resolution to OPs problem was provided by two different people.

Basically, we can try and switch the template's default to something that seems to work at the time, but mostly it's trial and error for everyone because sourcemaps suck.

@LinusBorg understood. Hopefully it'll get resolved upstream in webpack. Thanks for the reply!

Was this page helpful?
0 / 5 - 0 ratings