Vuex 调试工具安装

vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

chrome商店直接安装

最简单的方法是直接在chrome商店下载安装vue-devtools，但是这需要才能下载。

手动安装

• 首先到github找到vue-devtools。然后将其clone到本地，这需要先在本机安装git、node环境。

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

• 在根目录，安装项目所需要的npm包：

npm install

如果觉得太慢，可以安装一个cnpm（淘宝镜像），然后使用cnpm install命令来安装依赖包，这样速度会快很多。

• 使用命令编译项目文件：

npm run build

• 修改vue-devtools-master文件夹中shells文件夹下的manifest.json文件，将persistent项修改为true：

"persistent":true

• 扩展Chrome插件。

点击浏览器中的“更多工具”–>扩展程序。不同版本浏览器拓展程序选项位置可能不一致。

或者直接在浏览器中输出“chrome://extensions/”进入扩展程序页面，然后在页面中找到“加载已解压的扩展程序”按钮，如果没看到这个按钮，可以勾选页面右上角的“开发者模式”就可以看到了。

然后选择vue-devtools-master>shells下的chrome文件夹就可以了，安装成功后如下图所示：

安装后，需要关闭浏览器再重新打开, 才能使用。

使用

在Vue项目中，按F12，选择vue就可以使用了。如下图所示：

链接：https://www.9xkd.com/