typescript - vuejs 计算属性和模板调试有什么好办法吗？

Question

我在vuejs调试中遇到一些问题，比如调试计算属性，或者模板中的数据值等等......

现在我使用https://vuedose.tips/tips/debugging-templates-in-vue-js/中提到的IIFE方法调试它:

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

我遇到的一个大问题是关于用于在 vue 文件中调试的 chrome 中的源映射，如下图所示，一个文件中有太多具有不同代码的重复项(下面显示的这个 panel.vue 不是那个我在我的项目中，它可能是一个渲染版本或其他东西，我不想看到，我只想看到真正的交易 panel.vue 文件在它上面更好地工作):

如何解决这个问题，有没有办法在 vuejs 中正确调试这些部分，比如使用设置断点？

Answer 1

我建议你使用 vue-dev-tools。一个浏览器扩展，允许您逐个检查组件 data、computed 等等。

您可以从每个浏览器扩展商店下载并安装它:Chrome , Mozilla等

Vue Dev Tool存储库。