本文主要介绍 vue的调试工具 vue-devtools 的安装和使用,以及自己入的坑,希望能帮助到大家。
一、安装
1、下载依赖包
git clone https://github.com/vuejs/vue-devtools
之前直接下载依赖包,试了很多遍,执行编译代码 npm run build 时都会报错,最后在网上查了很多资料,看到有人说,直接下载的那个版本测试不成功,推荐使用 v4.1.5 和 v5.1.1,最后本人使用的是 v5.1.1,安装成功。
2、安装依赖包
1. cd vue-devtools
2. cnpm install或者npm install
3、修改manifest.json文件
把"persistent":false改成true
4、编译代码
npm run build
命令执行成功,控制台将出现如下结果:
5、添加到Chrome扩展插件
在浏览器输入地址 “chrome://extensions/” 进入扩展程序页面,打开开发者模式,点击加载已解压扩展程序,选择 vue-devtools>shells 下的 chrome文件夹。
二、vue-devtools使用
当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。