Vue-DevTools调试工具安装
做前端开发，调试能力尤其重要，目前SPA项目，都是基于虚拟DOM操作数据，如果不借助于工具，我们调试会变得略微艰难，关于dev-tools的文章非常多，今天我就个人安装使用情况做一些记录。
基于Chrome安装通常有两种方式
一、Chrome应用商店安装
这种方式极其简单，打开商店，直接搜索vue devtools即可，但是国内用户需要翻墙才能打开，所以这种方式会卡住大部分用户。
二、插件源码编译安装
1. 打开Github，搜索vue-devtools，通过Git克隆
git clone https://github.com/vuejs/vue-devtools.git用vscode打开以后，需要切换到master分支（默认dev分支打包会报错）
或者使用git checkout master切换到master分支
2. 安装项目依赖
// 进入到项目目录cd vue-devtools// 安装依赖cnpm install 或者 yarn install 或者 npm install
安装成功后截图如下：会显示 All packages installed
3. 编译源码
npm run build 或者 cnpm run build编译成功后，如下图：
4. 添加编译后插件到chrome扩展程序中
cnpm run build之后，会生成一个shells文件夹
shells文件夹里面包含一个chrome文件夹
打开浏览器扩展程序
选择shells -> chrome文件夹导入
导入后会显示devtools插件
5. 测试验证
打开慕课上面的小米商城课程，可以直观的看到当前页面包含的自定义组件、每个组件上挂载的data数据，以及Vuex当中存储的数据。
插件安装简单，但是想必部分同学也会遇到坑：
看不懂插件如何安装和编译
安装依赖失败
下载源码无法切换分支
编译后不知道导入哪个文件夹
导入后，浏览器不生效
上面的步骤只要完完全全走下来会解决所有的问题！
如果大家不想自己编译也可以直接使用我编译好的插件：
https://github.com/JackySoft/JackySoft.github.io
下载chrome.zip进行解压即可。
关注前端，关注未来，爱上 前端未来