Vue-cli: Breakpoints map to wrong line in chrome

[nioufe]

Hello,
I've been trying to get my breakpoints in chrome to show the proper line while debugging an app generated with vue-cli. Usually the problem I have is : The breakpoint stops execution properly but my app really is 2 lines up or down.

An example :
var a = 1;
a++; <-- breakpoint
a++;
When chrome stops execution, a is either 1 or 3 instead of 2.

I figured the problem should come from webpack, and found that changing :
config.devtool = 'eval-source-map' to config.devtool = 'source-map' solves the issue. (And also has easier names for files when debugging).

I tried to understand how the change solved the issue but no luck there... I'm still a beginner with webpack.

[yyx990803]

Is the code inside a *.vue file?

[nioufe]

Yes.
But I also tried :
Code inside a js file required in main.js
Code inside a js file include in a < script src="" > of a vue file

I'm (almost) sure all of them had the issue.

[nioufe]

Node and npm version - npm: '2.14.7', node: '4.2.3'
Chrome 48.0.2564
And I believe Firefox had the issue too.

[skyronic]

Do you have hot reloading enabled? I was also experiencing this issue where the source maps were not in sync with the code, and sometimes even though chrome would break on the right line, it would sometimes not match up in the sources view.

I will investigate whether this is a webpack issue or a chrome issue. But either way I am not sure if this is vuejs or vue-cli specific

[azamat-sharapov]

I tried to understand how the change solved the issue but no luck there

Have a look at the table from this documentation, specifically "quality" column.
"original source" means sourcemaps will point to original source files, so when you set breakpoint to original file, you may not have luck pausing runtime.
Try to change devtool to "eval" and check how breakpoints work.

[chrisvfritz]

@Nioufe @skyronic Any luck resolving this? Was @azamat-sharapov's suggestion helpful?

[nioufe]

@azamat-sharapov Changing from "eval-source-map" to "source-map" solved the issue.
So breakpoints do work in the original files under some conditions.

I'll try "eval" to see how it works. Hopefully i'll come back with better answers.

@skyronic I agree, this doesn't look like a vue-cli issue, maybe vue-loader? I'm not familiar with how it works =/
But if there is a default configuration that works better than the current one, maybe you could consider changing the value of "devtool" ?

[chrisvfritz]

@Nioufe Any further word?

[nioufe]

I'm still trying (from time to time) to find where this is coming from.

With "#eval-source-map", breakpoints are broken across browsers. I tried with vue-cli/vue-loader latest versions and only random breakpoints work. Most of the time they don't get triggered.

With "#source-map", only breakpoints in the first lines of a file seem to be broken. I found a Babel 6 issue which could explain this : https://phabricator.babeljs.io/T7210

Maybe this is two different issues. I'm starting to learn how webpack/vue-loader/babel interact to try to pinpoint exactly which one is guilty.

[chrisvfritz]

@Nioufe Thanks for your continued research into this! It sounds like you're zeroing in on it. 🙂

[zigomir]

Closing due to inactivity, please open new issue if there's more information available.