Vue Devtools大法好
这是一篇小白friendly教程
Vue Devtools是一款谷歌浏览器插件,专门为调试vue而设计。假设你做了一个vue应用,当你在调试的过程中,打开的控制台是这样的:
满眼都是data-v
的这种标签,你的组件在什么位置,可能要一个一个标签点开之后找,你的应用的数据是什么状态,可能要靠console
打印出来,给我们的调试带来了很大的不便。。那有没有什么好办法呢?灯灯灯灯!就是这款Vue Devtools。
安装
打开这个Vue Devtools,然后安装。安装完成后,按F12,然后就发现下面这个多出来的标签:
没错,就是它了,假如在一个vue项目下打开,就会看到:
看到的是组件树,而不是DOM树,旁边还有选中组件的data
数据,computed
等,以及组件所在文件夹的路径,一下子就看透了这个组件,是不是觉得豁然开朗