一、使用
二、安装
前言
vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装和使用。
一、使用
打开vue-devtools；
点击<Root> == $vm0;
可以看到我们往vue里面绑定的数据；
image.png
修改input的值，可以看到三处同时更新；
image.png
这里vue的做法，涉及到一个概念：
Single Source of Truth（数据源唯一），即这上面的这几个地方，它们指向的数据源是同一个。所以当其中一处对" info "（数据源）进行了修改，其它地方也会马上得到体现。
注意：
1、初次安装vue-devtools，需要关闭chrome devtool再开，才能看见Vue标签。
2、如果是直接访问本机的html，需要在vue-devtools的设置里勾选“允许访问文件URL”；
右键Vue标识——管理扩展程序
01
勾选允许文件访问
02
可以看到标识变亮了
03
二、安装
chrome商店直接安装
1、打开应用商店
打开应用商店
2、搜索
搜索vue-devtools
3、添加
添加插件
vue-devtools可以从chrome商店直接下载安装，非常简单，不过要注意的一点就是，需要翻墙才能下载。
手动安装（在github上找vue-devtools，不用翻墙）
参考地址：https://segmentfault.com/a/1190000009682735#articleHeader2
