安装vue-devtools

1. 通过chrome应用程序商店安装

前提是, 你能访问chrome, 目前国内基本上是不可访问到的.(除非你"翻墙")

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

yarn install

yarn build

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools > packages > shell-chrome文件夹。

注意
如果看不见“加载已解压的扩展程序...”按钮，则需要勾选开发者模式。

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易。

组件选项卡，将对于页面组件的结构进行了树形化，更加直观的展示了当前组件包含了哪些组件，组件里包含了哪些内容，比如props,data 等。

更加直观的展示了当前全局数据的存储状态，及相关 mutations 、getters 等内容。

你可以通过事件选项卡，定位事件来源于那个组件，点击对应的事件，你能看到和事件更多相关的信息。

可以更加直观的看到路由切换相关的信息