Chrome插件vue-devtools的安装使用

安装教程请参考这篇博客：在浏览器上安装 Vue Devtools工具

安装完成后，打开vue项目，chrome浏览器右上角会出现这个图标

按F12启动调试程序，会发现选项中多了一项Vue

 

如果安装完成，但控制台中并没有Vue的选项，请检查在Vue项目中是否以cdn的方式引入vue.js

如果以cdn的方式引入vue.js，点击浏览器右上角的vue图标会出现这样的提示，

"Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author."

“在此页面上检测到Vue.js. Devtools检查不可用，因为它处于生产模式或由作者明确禁用。”

 

此时需要在项目文件中额外添加一行代码：Vue.config.devtools = true;

这样就可以开启控制台的Vue调试工具了！