66、vue-devtools

由于Vuejs是一个框架，它是构建于 javascript 的代码之上，而 javascript 语言的实现并不像其他后端语言（例如 java, python, ruby等）那样有着对debug友好的错误提示机制。

这个可以说原因有：

1、 javascript语言是一个非常灵活的语言，支持“元编程”，而对于任何一个“框架”来说，都会大量的用到“元编程”的能力例如：

var my_code = "var a = 1 + 1; console.info(a) " 
eval(some_code)

在上面的代码中， eval方法就是一个最典型的 “元编程”方法（meta programming). 说的通俗些，元编程就是为了“让程序来写程序”。元编程能力是评估一个语言是否“高级”的一个重要指标。

在带来大量好处的同时，元编程的缺点是：显示错误信息比较麻烦。往往显示的错误提示或者stack trace 不是特别明朗。

1、 javascript语言的实现机制，是在各个不同的浏览器中实现的不同的浏览器厂家，都会实现不同的javascript虚拟机（virtualmachine),所以，我们往往会发现，一些javascript的错误往往是不可读的例如：

上面出错的原因，就是由于，javascript的代码中，可能会有不同的”scope”, 而该浏览器为每个”scope”, 都会分配一个 “virtual machine”, 所以，上面打印出来的 stack trace , 很忠实的反应出了问题所在，就是几乎没有可读性。

所以，为了方便我们的开发，各位同学一定要安装对应的开发组件，例如： “Vue.js devtools”.

安装步骤

非常简单。建议大家使用chrome，这样就可以以插件的形式来安装了。

1、安装chrome；
2、使用科学上网，打开：

3、就会看到下图：

1、点击后，会询问是否安装，我们点击”添加扩展程序”这个按钮就可以了：

1、就可以看到，浏览器的右上角新增加了灰色的图标安装成功；
2、打开“设置“->‘更多工具’->‘扩展程序’,就可以看到刚才安装的Vuejs了，勾选下面的“允许访问文件网址”.如下图所示：

在安装devtool 之前，我们调试的时候，都是打开浏览器的“开发者工具”，然后看到的类似下图：

安装好之后，如果你的vuejs 项目是使用 http 服务器打开的话，（不是 file:///...) 就可以看到了：

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有