vue-devtools-简介、下载、安装、配置、使用

vue-devtools是用于调试Vue应用的Chrome插件,通过它能提升开发和调试效率。文章详细介绍了两种安装方法,包括解决npm安装过程中可能出现的问题,以及在Chrome中配置和使用该工具的步骤。
摘要由CSDN通过智能技术生成

一、简介

vue-devtools是一款基于chrome游览器的插件,可以用于调试vue应用,也可以用来辅助我们找到各页面对应的Vue.js文件路径,这将极大地提高我们的开发和调试效率。

二、下载

下载路径:https://github.com/vuejs/vue-devtools
将下载好的文件夹放在任意磁盘下
在这里插入图片描述

三、安装方法一

前提:先安装好node和npm打开cmd,进入devtools-main的目录之下,执行命令npm run build 进行vue-devtools的安装
在这里插入图片描述
若出现上图的情况,则更先执行命令npm install -g lerna
在这里插入图片描述
再次执行命令npm run build,发现又报错了,有些报错是因为npm自身的局限性,以及部分模块没有安装。
在这里插入图片描述
安装以下三个命令:yarn install
1、npm install yarn -g
2、npm install webpack webpack-cli –g
3、npm install -g cnpm --registry=https://registry.npm.taobao.org(cnpm -v可以查看版本)
在这里插入图片描述
接着,进行cnpm install安装package.json中的依赖包
在这里插入图片描述
cnpm install electron
在这里插入图片描述
cnpm install cypress
在这里插入图片描述
如过此时,执行npm run build还是错误,那么考虑换安装方法二。

三、安装方法二(推荐)

1、克隆:git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git
2、修改mainifest.json 中的persistant为true
在这里插入图片描述
3、执行命令 npm i
4、执行安装命令 npm run build
在这里插入图片描述
终于成功了!

四、配置

chrome中找到 更多工具 / 扩展程序 选项
在这里插入图片描述
勾选“开发者模式”
加粗样式
然后点击 加载已解压的扩展程序,选择vue-devtools\shells\chrome,确认
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、使用

用谷歌浏览器打开vue项目,点击F12,选择“vue”,即可使用了。
vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试
在这里插入图片描述
在这里插入图片描述

  • 13
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕斯-ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值