vuejs之Vue Devtools

Vue Devtools大法好

这是一篇小白friendly教程

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

vuejs之Vue Devtools

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

安装

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

vuejs之Vue Devtools

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

vuejs之Vue Devtools

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

上一篇:PyCharm 配置远程python解释器


下一篇:第四十天 并发编程之io模型