如何提升Vue的开发效率呢？ Vue-devtools帮你实现快速调试！

一、前言

---

大家怕是都遇到过在Chrome里面查看Elements元素时，监测不到Element元素的数据变化的问题。

由于vue是数据驱动页面渲染的，所以必须要进行对数据动向的监测。

下面我会一步一步的教大家来执行，包括里面不少的坑...

 

二、安装

---

首先我们来安装Vue-devtools，有两种方式：

 

（1）最简单的是在谷歌商店中下载，地址给大家贴出来：

https://chrome.google.com/webstore/search/Vue.js%20devtools?hl=zh-CN

下载第一个就好，这是Vue官方提供的

 

（2）使用git下载

1. 在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools

2. 解压到本地的某盘

3. 用你的cnpm进入该文件夹下，执行下面命令：

cnpm install 

cnpm run build   

 

 

三、这里你会遇到第一个坑

---

安装好Vue-devtools插件，输入cnpm run dev跑起你的本地项目，右上角的小角标就会亮起。

但是你会发现控制台中并没有Vue的Tab项，并且会报下面的错误，翻译过来如下：

Devtools插件是不可用的，因为它是在生产模式或显式禁用的。

 

（1）解决生产模式问题

webpack.config.js

 

（2）解决显式禁用问题

修改Vue-devtools插件中的 manifest.json文件，将persistent改为 true即可

1.获取插件id

进入Chrome扩展程序页面： chrome://extensions/ ，复制id

2.找到Vue-devtools插件存储的位置

1⃣️ windows:

文件资源管理器中，直接搜索插件ID，找到里面的manifest.json

2⃣️ mac:

访达中直接搜索插件ID，找到里面的manifest.json

 

3.修改显式禁用

 

 

四、接下来是最后一个坑

---

如果此时你的控制台中，还没有Vue的Tab页，左键单击图标，你发现会弹出如下提示：

这个问题，是因为没有在main.js中开启debug  mode！！我们在main.js中开启就ok啦。

（1）修改main.js

import Vue from 'vue'
Vue.config.devtools = true

（2）重新启动项目

就可以成功调试啦！