一波三折之chrome vue-devtools安装及使用

古人云：工欲善其事, 必先利其器。
用vue-devtools来调试开发vue项目能事半功倍吗？先用起来~
谈谈我从安装到使用vue-devtools遇到的一些问题吧 ~~~

**1.**首先通过github下载压缩包：https://github.com/vuejs/vue-devtools
或者通过git命令： git clone https://github.com/vuejs/vue-devtools
----这里如果是git克隆的小伙伴，需要耐心的等待下，需要些时间才能下载下来。

**2.**进入vue-devtools目录：cd vue-devtools，安装依赖：cnpm install

**3.**编译项目文件：npm run build
----到第三步遇到了问题，build报错。这里可能是第二步使用npm安装依赖没有安装完全。于是我又一番百度后决定使用yarn命令来下载安装依赖，简单介绍下yarn吧：
yarn是facebook发布的一款取代npm的包管理工具。
yarn的特点：
速度超快。
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
超级安全。
在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
超级可靠。
使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。
使用npm安装yarn：npm install -g yarn
查看yarn版本：yarn --version
以上安装好了yarn后，我们就可以用yarn安装vue-devtools的依赖啦：yarn install
依赖安装完毕，继续走第三步编译项目文件：npm run build。

**4.**修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true。

----我在这一步又遇到了问题！我的项目没有shells文件啊！只看到了packages文件里有个shell-chrome文件：

这当时可把我搞蒙了！经过一番脑洞后突发奇想，也许就是这个文件！只是文件展现的方式不一样，于是我就copy了这个文件夹放在了外层目录命名为chrome，在外层目录建立个文件命名为shell，再把刚刚命名的chrome移至shell文件中，这样vue-devtools项目底下就有了shells\chrome啦！

**5.**扩展Chrome插件
Chrome浏览器 > 更多程序 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入：

安装成功后你会发现你的Chrome扩展程序里多了vue.js.devtools。如下图：

**6.**重启Chrome，启动本地vue项目，在Chrome里打开f12调试工具，会发现：

开始你的vue调试吧！