将vue-devtools打包成edge插件

一、从github拉vue-devtools源码

目前最新的版本是v6.5.0,地址:https://github.com/vuejs/devtools

在这里插入图片描述
在这里插入图片描述

二、用npm安装yarn

yarn官方文档:https://yarnpkg.com/getting-started/install

注意查看自己的Node.js版本,不同版本安装yarn的命令不同。

在这里插入图片描述

三、使用yarn安装并编译源码

两个命令,yarn installyarn run build ,执行的时间稍长,等着就行。

在这里插入图片描述
在这里插入图片描述

四、将vue-devtools打包成edge插件

打开edge浏览器扩展,选择打包扩展,选择需要打包的插件根目录(D:\MyStudy\devtools\packages\shell-chrome),点击打包扩展后会在 packages 目录生成插件。如下:

在这里插入图片描述
在这里插入图片描述

五、离线安装edge插件

直接将打包扩展生成的 shell-chrome.crx 拖入扩展,添加扩展。如下:

在这里插入图片描述

如果提示此扩展不是来自任何已知来源,可能是在你不知情的情况下添加的。 如下:

解决办法:

  1. 把“shell-chrome.crx”文件后缀名改成rar,然后解压缩rar文件。
  2. 再进edge里加载解压缩的扩展,找到你解压缩的那个文件夹,点击打开就可以了。

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值