由于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”.
官方网址： https://github.com/vuejs/vue-devtools
安装步骤
非常简单。 建议大家使用chrome， 这样就可以以插件的形式来安装了。
1、 安装chrome；
2、 使用科学上网，打开：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd；
3、 就会看到下图：
1、 点击后，会询问是否安装，我们点击”添加扩展程序”这个按钮就可以了：
1、 就可以看到，浏览器的右上角新增加了灰色的图标安装成功；
2、 打开“设置“->‘更多工具’->‘扩展程序’,就可以看到刚才安装的Vuejs了，勾选下面的“允许访问文件网址”.如下图所示：
使用步骤
在安装devtool 之前，我们调试的时候，都是打开浏览器的“开发者工具”， 然后看到的类似下图：
安装好之后，如果你的vuejs 项目是使用 http 服务器打开的话， （不是 file:///...) 就可以看到了：
版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有