title: Is there any good way to debug vuejs computed properties and templates?
body: <p>I have some problems in vuejs debugging, like in debugging the computed properties, or data values in templates, etc...</p>
  
  <p>Right now I use IIFE method to debug it which is mentioned in <a href="https://vuedose.tips/tips/debugging-templates-in-vue-js/" rel="nofollow noreferrer">https://vuedose.tips/tips/debugging-templates-in-vue-js/</a>
  :</p>
  
  <pre><code>&lt;h2 dir="auto"&gt;
    {{(function(){debugger;let temp = headerMessage})()  ||  headerMessage}}
  &lt;/h2&gt;
  </code></pre>
  
  <p>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):</p>
  
  <p><a href="https://i.stack.imgur.com/k1mnJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k1mnJ.png" alt="enter image description here"></a></p>
  
  <p>How to fix this problem and is there any way to properly debug these kind of parts in vuejs, like set break point using?</p>