vuejs之Vue Devtools

Vue Devtools大法好

这是一篇小白friendly教程

Vue Devtools是一款谷歌浏览器插件，专门为调试vue而设计。假设你做了一个vue应用，当你在调试的过程中，打开的控制台是这样的：

满眼都是 data-v 的这种标签，你的组件在什么位置，可能要一个一个标签点开之后找，你的应用的数据是什么状态，可能要靠 console 打印出来，给我们的调试带来了很大的不便。。那有没有什么好办法呢？ 灯灯灯灯 ！就是这款Vue Devtools。

安装

打开这个Vue Devtools，然后安装。安装完成后，按F12，然后就发现下面这个多出来的标签：

没错，就是它了，假如在一个vue项目下打开，就会看到：

看到的是 组件树 ,而不是 DOM树 ，旁边还有选中组件的 data 数据, computed 等，以及组件所在文件夹的路径，一下子就看透了这个组件，是不是觉得豁然开朗