chrome 浏览器下安装vue-devtools总结

这几天给项目浏览器安装vue-devtools， 弄了好长时间， 安装了几个tag版本 都在install 时失败， 尝试了很多办法， 最后成功了，总结分享给大家
源码编译安装

1. 从git仓库下载vue-devtools 代码

https://github.com/vuejs/vue-devtools.git

2. 切换到vue-devtools 目录， 执行

   yarn install

3. 编译

   yarn build

4. 修改vue-devtools\packages\shell-chrome 下的manifest.json 文件

    "persistent": false    // 把false 改成true

5. 打开chrome 浏览器的扩展程序， 点击：加载已解压的的扩展程序， 从目录中选中shell-chrome
   加载成功后， 点devtools 的详情， 把允许访问文件网址等选项开启
   

到此， 浏览器的右上角就会出现vue 绿色logo

6. 打开项目主入口文件main.js 在其中添加

    Vue.config.devtools = true

7. 项目中使用vue 要使用开发版本， 不能使用压缩的生产版本， 否则vue-devtools会出现如下的提示

   Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.

8. 完成成功后， 在开发者控制台模式会出现Vue tab
   
9. 具体怎么使用devtools 提高开发效率 ，不再讲师