开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情
由于 Vue 是进行数据驱动的，仅仅从 Chrome 浏览器的控制台中的 Elments 选项中查看 DOM 结构，并不能很直观地看出其内部数据的变化过程。
所以，想要透彻地对 Vue 实例中的数据结构进行解析和调试，我们需要借助与 Vue Devtools 插件。
什么是数据驱动
通俗点说，数据驱动就是通过控制数据的变化来改变某物或某事。
Vue 的数据驱动，就是视图（View，也可以理解为 DOM 元素）随着数据的改变而改变。其原理如图：
明白了数据驱动原理，我们就不难想象，当 DOM 发生变化的时候，我们是可以通过 Chrome 的控制台查看到的。但是数据是存储在缓存中的，并不能很直观地被观察，要如何监控和调试呢？
回想以往，我们通过控制台调试 JS 程序的心酸历程，都是通过 console.log() 或者直接在页面中输出数据来做的。这样虽然直观，但是相当麻烦，尤其是对于只把重心放在数据的操作上的 Vue 程序，就更加的让人头大了。
基于此，Vue 团队开发了一个 Chrome 插件 Vue Devtools，方便我们去调试和分析它内部的数据变化。
Vue Devtools 安装与使用
Vue 官网上为我们提供了两个安装方式：
-
为指定浏览器安装插件：
-
通过 NPM 将该插件安装到本地系统中：
在开始安装之前，先来看下未安装时的 Chrome 浏览器的控制台界面。
首先，在终端运行下面命令下载待调试的 Vue 程序文件：
wget https://labfile.oss.aliyuncs.com/courses/5428/demo.html
在 Web 服务器中运行后打开 Chrome 浏览器的控制台，显示如下：
接下来，我们点击该链接 -> 获取 Chrome 扩展程序，跳转到 “chrome 网上应用店”页面，点击“添加至 Chrome”按钮下载并自动安装该插件。
安装完成后，“chrome 网上应用店”页面中的“添加至 Chrome”按钮将变为“从 Chrome 中删除”按钮。
然后打开 Chrome 浏览器的控制台观察，会发现工具栏那里多出一个 Vue 的选项。
点开 Vue 选项，我们就可以清晰地看到 Vue 应用实例中数据的值，并可以通过修改相关数据去观察和调试页面发生的变化了。😄
1.下载vue-devtools工具
进入GitHub官网进行下载，网址：github.com/vuejs/vue-d…
下载安装包并将安装包进行解压
2.安装vue-devtools工具
在解压后的文件夹中打开cmd命令行，在命令行中输入命令 npm install（若不能使用npm命令，请先安装node.js）
下载完成后执行：npm run build 命令
完成安装。
然后进入 shells\chrome子目录，编辑 manifest.json 文件，修改persistent 为 true。
修改完成之后，将chrome文件拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序即可使用。
