共计 778 个字符，预计需要花费 2 分钟才能阅读完成。
Vue 项目中使用 Vue.js devTools 这款调试神器，可以极大程度的提高我们的开发效率。
安装
1、打开 Chrome 网上应用商店安装插件（自墙）, 直接搜索 devTools 安装即可。贵宾传送阵，请戳这里→Chrome 网上应用商店
2、从 github 上下载到本地。贵宾传送阵，请戳这里→vue-devtools
1)、进入到 /vue-devtools 目录下 (npm install 或者 cnpm install) 安装项目所需依赖。
2)、安装完依赖后 (npm run build 或者 cnpm run build) 编译项目。
3)、编译完项目后，在 /vue-devtools/shell/chrome/manifest.json 中修改 persistent 参数 false 为 true。
4)、在 chrome 扩展程序页面，打开“开发者模式”，点击“加载已解压的扩展程序”按钮，选择你本地的 …/vue-devtools/shell/chrome 文件夹, 添加完成后，勾选允许文件地址是否访问。
安装完成后 devTools 的图标会出现在浏览器的菜单栏中。
以上两种安装方式告一段落。下面让我们在 vue 项目中体验一下这款调试神器吧。
使用
运行 Vue 项目，在 Chrome 浏览器中展示项目（浏览器菜单栏中的 devTools 图标会亮起），按 F12 打开开发者工具，在开发者工具的菜单栏最后面会看到 Vue，选中它就可以尽情的使用了。
当然这样一顿行云流水的操作下来，有些人会一次成功，而有些人则不会成功，浏览器菜单中的 devTools 图标亮滴鸭批，但是就是在开发者工具的菜单栏最后面看不到 Vue。嗯~~~，怎么肥事小老弟？
请查看项目的 index.html 中，对 vue.js 的引用。你肯定使用了压缩版的 vue.min.js，使用 vue.min.js 默认为生产环境，会导致 devTools 不显示，改为 vue.js 即可。