使用Vue开发项目时，常会用到一款谷歌浏览器插件，vue-devtools
安装成功后，运行本地Vue项目，打开浏览器控制台就如下：
其中可以便捷的查看vueX的数据以及组件结构等，非常方便，
文章图片
安装步骤如下：
1、首先给大家提供一个git地址，虽然官网也有地址(https://github.com/vuejs/vue-devtools.git)，我认为不太好用
给大家提供另一个git地址：
【前端|Chrome（谷歌浏览器）安装Vue插件vue-devtools（图文详细教程）】https://gitee.com/zhang_banglong/vue-devtools.git打开里面就如下：
文章图片
2、打开控制面板，进入到vue-devtools文件夹下，输入命令
npm install或者cnpm install
文章图片
3、上一步成功后，紧接着输入命令
npm run build
文章图片
4、打卡文件夹，找到shell文件夹，
文章图片
5、打开shell文件夹，会找到一个chrome文件夹，就是它了！！！
文章图片
6、打开谷歌浏览器（Chrome），找到扩展程序打开
文章图片
7、选择“加载已解压的扩展程序”
文章图片
8、选中刚才找到的chrome文件夹
文章图片
9、选中后，“扩展程序”界面就如下，就完成了
文章图片
10、本地运行一个Vue项目，F12打开控制台，如果没有，要刷新一下页面，或关闭浏览器重新打开
文章图片
其实同样的方法，找到其他浏览器的扩展程序，选择chrome文件夹，其他浏览器也可以同样出现vue-devtools
如果你比较着急，一时之间又弄不好拉下来的代码，可以考虑先安装个火狐浏览器，直接去扩展界面里搜索vue，点击添加即可
文章图片
文章图片
推荐阅读
- 前端|解决chrome(谷歌)浏览器开发者工具中header的请求参数“Request Payload“和“Query String Parameters“（消失）不见了的问题
- 面试|【vue网站优化】秒开网页
- 面试|Google Chrome（谷歌浏览器）安装使用
- 知识积累|浏览器相关及知识积累
- 面试|axios 拦截器
- html|MVC，MVP 和 MVVM
- 前端|Github搭建个人网站（学习前端，记录个人博客）
- 面试|rabbitmq详解
- 面试|Spring的事务传播机制