meteor-vue/vue-meteor

Debugging .vue files in chrome

WayneUong opened this issue · 4 comments

WayneUong commented

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 commented

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 commented

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.

  • 😕1
GeoffreyBooth commented

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

image

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 commented

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