Is there any good way to debug vuejs computed properties and templates?

Question

I have some problems in vuejs debugging, like in debugging the computed properties, or data values in templates, etc...

Right now I use IIFE method to debug it which is mentioned in https://vuedose.tips/tips/debugging-templates-in-vue-js/ :

<h2 dir="auto">
  {{(function(){debugger;let temp = headerMessage})()  ||  headerMessage}}
</h2>

and a big problem which i have is about source map in chrome for debugging in vue files, like below picture, there are too many duplicates with different codes from one files (this panel.vue is showing below is not the one that I have in my project, it is maybe a rendered version or something else, which I don't want to see, I just want to see the real deal panel.vue file to work better on it):

How to fix this problem and is there any way to properly debug these kind of parts in vuejs, like set break point using?

Answer 1

For debugging template issues I'd typically recommend moving any complex logic into a method. From there it is easy to debug with typical tools.

Issues with Vue computeds usually break down into one of three camps:

1. You are debugging some complex logic in the computed

In this case try moving the complexity out into a method and just calling it from a computed. Then you can use debugger, console.log and breakpoints, whatever you prefer.

However, when you do this you need to make sure that any data/props you depend on for reactivity stay in the computeds definition so you don't break reactivity. In this approach the computed becomes more about gathering the arguments for the method/methods that are doing the heavy lifting.

2. Your logic is fairly simple but it isn't performing as expected

For these cases I usually pop open the Vue devtools, select the component the computed belongs to and then use $vm to inspect the state of the component and run intermediate snippets of the computed's logic until I find the issue.

You can access any data/props/computeds directly on $vm, for example $vm.myProp.

Note you have to select a component in devtools for $vm to be set.

3. The computed depends on reactivity but isn't changing

Here my approach is often the same as #2.

Are there typos in the names of the reactive elements you are depending on? If something is always evaluating as false it may be because a typo is referring to a property which doesn't exist and returning undefined (falsy).

Also if you are depending on a change in nested state for data or a prop ensure that you are using Vue.set / this.$set as appropriate.

Answer 2

In addition to what @Toodoo said, for a Computed property to appear in the section with the data & variables, your Computed must appear on the list of exported properties, that is, the "return" at the end of your setup.

return {Component1, data, ComputedProp }

and then it will show up as Computed

In other words, what you expose/export for the App to see, you do to the dev-tools (this is the important detail).

Answer 3

For me this helped a lot, inside your computed add :

try { ... } catch(e) { console.log(e); }.

Try also to move your return statement to encircle the problem and make the doubtful code inside the try bloc.

Answer 4

I suggest you to use vue-dev-tools. A browser extension that allow you to inspect component by component data, computed and much more.

You can download it and install it from every browser extension store : Chrome, Mozilla, etc.

Vue Dev Tool repository.