【译】Vue实用笔记（十八）：调试Vue的模板文件

作者： Rubén Valseca

---

虽然Vue.js DevTools 是个很好的调试代码的调试工具，但是有时候呢你可能想要调试一下template中的代码，正如你知道你可以在你的template中放一个js的表达式，可能你也想放置一个console.log，例如下面这种：

image

image

这是因为Vue模板中的所有变量都是在你创建的Vue实例中去找的，所以最快的一个方法是搞一个可以通过Vue组件实例找到的log方法。

image

使用方法{{ log(message) }} 。

但是你有时候想要其他组件中也要使用这个方法。重复使用这个方式就会比较烦了。所以我们需要给Vue的原型 添加一个log属性，在main.js用Vue.prototype放我们自定义的log方法：

image

现在，我们可以在每一个组件的template中使用$log，如果我们要想避免影响渲染，那就需要用||和我们的变量做运算了。
so now we can use $log in every component template and if we don’t want to interfere with the rendering just use the JS lazy evaluation with an OR operator

image

精彩吧？额。。。但是如果我们想要在template设置一个断点调试变量，该怎么办呢？

如果我们放一个debugger在模版中：

image

那这个组件就不能编译了！但是，如果我们用上面相同的策略，我们会发现所有的断点都在我们定义的原型属性中，而不是我们想要debug的template中：

image

所以，为了正确的template中进行断点，我们可以用个小技巧：把debugger放在一个自动执行函数中IIFE ，像下面这样：

image

我们会在编译后的结果中找到渲染的函数：

image

在这里“_vm”变量代表的是组件实例

检查这个编译后的模板是个很有意思的事情，但是由于一些特殊原因，在chrome的开发者工具中我们不能在函数作用于中找到这个变量，除非我们把它们放在debugger后面

image

现在你可以调试Vue代码中的任何内容了！

image

以上就是所有内容了，我希望这些技巧会让你找到自己最满意的调试Vue的templates的方法，为了满足自己的好奇心，让我们畅游在Vue编译后的代码中吧。

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!