Search code examples
typescriptvue.jstemplatesdebuggingcomputed-properties

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

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):

enter image description here

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

Solution

  • 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.