最近用vue开发，需要看一下vuex的数据结构，原本也没什么，就安装了一下vue-devtools，这边重温一下安装的过程。

首先去github上面下载一个压缩包。地址：

这边是直接下载，另一个还没试过。

解压之后得到：

然后进入这个目录进行初始化npm install和编译npm run build，也可以用cnpm。这边顺便提一嘴，安装cnpm，直接在https://npm.taobao.org/管网里面找到这句命令执行就可以了：

npm install -g cnpm --registry=https://registry.npm.taobao.org。

然后打开谷歌浏览器，找到：

之后右上角开发者模式打开，点击这个：

选中目录下shells下chrome文件夹，这样就安装完成了，启动你的VUE项目，就能在开发者模式下看见：

这边说一下，我刚安装完，启动了项目没有出现VUE工具，重启了浏览器，然后VUE自动打开项目还是没有，我不知道是我电脑问题还是什么，必须关闭浏览器VUE项目然后重新打开，还要刷新一下才出现，本人觉得是电脑问题。

经过我的测试，安装完了之后删除这个vue-devtools-dev文件夹我们安装的VUE调试工具也会删除，意思就是说这个文件是不能删除的。

说真的，我很少用这个调试工具去操作什么，或许有很大的用途我还没遇见这样的场景而已，这边只是记录一下这个过程。

欢迎关注Coding个人笔记 公众号