vue-devtools的安装

vue-devtools的安装

vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容，那么借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。

本文重点介绍vue-devtools安装方法，提供chrome插件直接安装方法。接下来我们就介绍一下vue-devtools的安装。

1.下载好vue-devtools压缩包(crx类型的压缩包)，直接解压到本地目录中。如下图：

 

2.打开Chrome浏览器，选择“自定义及控制”单击，在下拉菜单中选择“更多工具”->“扩展程序”，如下图：

 

3.将右上角的开发者模式打开，如下图：

 

4.点击''加载已解压的扩展程序''按钮，选择第一步中保存vue-devtools的目录,点击''选择文件夹''按钮即可。自动回到浏览器后出现如下图所示：

 

5.在Chrome浏览器中访问vue项目，并打开调试模式（F12），可以看到Vue选项卡，如下图：