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

Question

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

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

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

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

Answer 1

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

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

Vue Dev Tool 存储库。

Answer 2

对我来说，这对我有很大帮助，在你的计算添加中：

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

也尝试移动您的 return 语句来包围问题并将可疑代码放在 try 块中。

Answer 3

除了@Toodoo 所说的之外，要使 Computed 属性出现在包含数据和变量的部分中，您的 Computed 必须出现在导出属性列表中，即“return" 在设置结束时。

return {Component1, data, ComputedProp }

然后它将显示为 Computed

换句话说，您 expose/export 让应用程序看到什么，您就对开发工具做什么（这是重要的细节）。

Answer 4

对于调试模板问题，我通常建议将任何复杂的逻辑移动到一个方法中。从那里可以很容易地使用典型工具进行调试。

Vue 计算的问题通常分为三个阵营之一：

1.您正在调试 computed

中的一些复杂逻辑

在这种情况下，尝试将复杂性移出到一个方法中，然后从计算的方法中调用它。然后您可以使用 debugger、console.log 和断点，随您喜欢。

但是，当您执行此操作时，您需要确保您依赖于反应性的任何 data/props 都保留在计算定义中，这样您就不会破坏反应性。在这种方法中，计算变得更多地是为正在做繁重工作的 method/methods 收集参数。

2。您的逻辑相当简单，但未按预期执行

对于这些情况，我通常会弹出 Vue devtools，select 计算所属的组件，然后使用 $vm 检查组件的状态和运行中间片段计算的逻辑，直到我找到问题。

您可以直接在 $vm 上访问任何 data/props/计算，例如 $vm.myProp。

请注意，您必须 select devtools 中的一个组件才能设置 $vm。

3。计算取决于反应性但不会改变

这里我的做法通常和#2一样。

你所依赖的反应元件的名称是否有错别字？如果某些东西总是评估为 false，那可能是因为拼写错误指的是不存在的属性并返回 undefined（falsy）。

此外，如果您依赖于数据嵌套状态的更改或道具，请确保您使用的是适当的 Vue.set / this.$set。

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