CODEWITHSUNDEEP
vue.jswebpackgoogle-chrome-devtools
Leos Literak
Leos Literak

Reputation: 9474

Vue - show line with error in Chrome dev tools

I try to setup the source maps in a hope it will cause to show a real position of an error in Chrome developer tools.

I tried these options in vue.config.js:

configureWebpack: {
  devtool: 'eval-source-map',
},

and

configureWebpack: {
  devtool: 'source-map',
},

But I still get such error:

enter image description here

This is my package.json snippet

"scripts": {
  "serve": "vue-cli-service serve",
...
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.12.1",
  "@vue/cli-plugin-pwa": "^3.12.1",
  "@vue/cli-service": "^4.2.3",

How to fix it? How does an error look with correctly set up the source map?

Update: Minimum reproducible project: https://wwww.github.com/literakl/vue-errors It happens for the errors in vue components.

Upvotes: 3

Views: 6722

Answers (3)

Radu Diță
Radu Diță

Reputation: 14171

Your error seems to be from the template part of the component.

Maps won't work on template errors as the template is converted to a big javascript function (render) and the connection between template and the render function is lost.

Your best is to set up an error handler and log it.

Upvotes: 1

waffl3head
waffl3head

Reputation: 136

I'm not sure if you are already using the VueJS devtool extension, but you should definitely use that in your overall workflow as well. Available for Chrome and Firefox.

The reason I'm advising to use this is simply that sometimes your code might be correct, but as it is written in your error example "Cannot read property 'poll' of undefined" it looks like the prop poll is not being filled correctly by the parent component, or whatever is pushing data to the PollHeading.vue file.

With the Vue devtools you can inspect data, props and computed properties of a single component, watch events as they unfold and visually follow data streams throughout your application.

Escpecially with complex transfers of data this can get a little out of hand and a good tool to visualize this is a real life saver.

That said, getting explicit line numbers of an error in Vue2 is kind of a hit or miss situation; with Vue 2.5 and onward you're able to place an errorHandler() hook inside your component that will give you a detailed stacktrace. Try placing one in the PollHeading.vue file and see what output it'll give you. Should be much more detailed than the default output you got.

Upvotes: 3

perlindstroem
perlindstroem

Reputation: 139

The error should look something like this if the error occurs in the javascript part of the component: enter image description here

Looks like you have the correct settings, my vue.config.js looks like this: 

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

I also use "@vue/cli-service": "^4.2.0"

Make sure that you have restarted the serve-script -- it won't work otherwise

Upvotes: 5

Related Questions