Vue学习之调试工具vue-devtools安装教程

  虽然GitHub上可以找到开源的vue-devtools，但是安装起来还需要编译等等，有兴趣的朋友可以尝试一下。地址：vue-devtools—github，下载或克隆后的代码经过编译的步骤流程可以在其他朋友的博客找到。鉴于该过程较复杂，于是便介绍了一种较为简单的方式来安装vue-devtools调试工具。
  首先，先介绍一下vue-devtools调试工具吧。vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率，尤其是对于初学vue的朋友来说可谓是一大利器。它可以调试后面需要学习的vuex状态管理和路由等等，比如在 Components 中你可以更好的看到组件信息变量和方法，在 vuex 中你可以查看到state,mutations,actions, getters等，在 Events 中你能看到你的所有事件方法。现在来安装这个利器。

vue-devtools工具下载地址

vue-devtools文件链接：https://pan.baidu.com/s/1HNM9IB5IdVnLuS2pVmelww 提取码：tscd

安装流程

文件下载后是.crx文件，然后将文件重命名为.zip压缩文件后解压即可：

文件解压后目录如下：

随后在google浏览器中选定扩展程序加载上一步解压的vue-devtools文件夹即可：


随后可以发现添加成功：

在网页中通过F12可以检查是否出现vue检查工具：

即表示安装成功。