devtools安装_如何安装vue-devtools并且使用

使用vue开发项目时，如果习惯vue当前项目一些操作后相关数据的变化的日志信息，可以安装一个vue-devtools调试工具。如何安装呢？请看下边：

一：下载与安装：

1.下载好vue-devtools压缩包(crx类型的压缩包)，直接解压到你自己选择的本地目录中：

2.打开谷歌浏览器，打开设置，并找到扩展程序：

3. 打开扩张程序按钮后，需要先把右上角的开发者模式打开，默认是关闭状态：

4.点击''加载已解压的扩展程序''按钮，选择刚才你下载并保存vue-devtools工具的目录(我自己是安装在D盘的vue-devtools目录),点击''选择文件夹''按钮即可：

自动回到浏览器后出现如下边图1红色框，然后刷新浏览器，出现图2红色框的标志，说明安装成功了

图1

图2

这样我们就可以在vue-devtools调试界面看到数据变化的日志信息。

二：了解并使用

1.将本地的vue项目跑起来后，在浏览器打开你的项目，打开开发者模式，你会看见地址栏下边多出了vue选项：

2.打开这个vue后，有以下页面(相关按钮的功能介绍如下图)：