Debugging .vue files in chrome

[WayneUong]

Is there a way I can set breakpoints for vue component files in chrome? The console logs always point to the wrong lines that are unavailable for breakpoints:

TypeError: Cannot read property 'name' of undefined
    at Proxy.__vue_options__.render (test.vue:103)

[jamesgibson14]

Has anyone figured this out, everything else is working great in our Meteor Vue Stack, but debugging client side is very difficult because of this?

[marvinside]

Try to disable Javascript Sourcemaps in Chrome Devtools.

1. Click ⋮ icon in top right corner
2. Click Settings
3. Disable Enable JavaScript source maps (Section Sources)

Your is now not as fancy as before, but now line numbers should work better.

[GeoffreyBooth]

The source maps are always off by the number of lines above the <script> block:

In this example, the debugger statement is on line 14, but because of the source map DevTools thinks it’s on line 21. Perhaps not coincidentally, there are 7 lines above the <script> tag.

[WayneUong]

@GeoffreyBooth @Akryum Have you published the fix in an official release yet? Thanks!