dev-tool安装方法(手动安装版)

记录一下vue调试神器dev-tool的安装过程,由于是在公司内网,也不方便挂梯子,所以手动安装——下载源码在本地编译,再添加扩展程序的方式安装。过程如下:


一、dev-tool源码获取

git地址:https://github.com/vuejs/devtools/tree/main

这里可以选择自己需要的版本,试了挺多版本,在安装的时候会遇到各种的文件缺失的问题,所以这里选择了一个v5.1.1版本,这个安装的过程基本比较顺畅,没什么大的问题。
版本切换
源码下载两种方式,第一种直接用git下载,git访问会出现连接失败的报错,有SSL验证和代理的问题,具体的问题遇到了可以自行搜索解决方法;这里为了方便直接点击Download ZIP下载压缩包就好。
源码获取

二、源码编译

这一步主要是安装依赖和编译源码,手动安装的过程官网教程也说得非常清楚,如果下载的版本一样的话直接执行以下指令就行

npm install//安装依赖,如果使用yarn进行包管理则yarn install
npm run build

完成后可以在文件夹里找到这个文件
chrome扩展文件

三、添加扩展程序

打开chrome浏览器,自定义及控制-更多工具-扩展程序,切换成开发者模式,点击加载已解压的扩展程序,选择第二步中的shells/chrome文件即可,
加载扩展程序
扩展程序的配置如下:
扩展程序配置

四、愉快地使用dev-tool

到此为止就可以使用dev-tool进行调试了,随便开一个vue项目,打开f12,切换到vue就ok了
dev-tool使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值