Vue的devtools工具打包

article/2025/10/8 10:38:18

Vue的devtools工具打包

最近想升级一下Vue的开发工具,因为升级到vue3后一直使用的是Vue.js devtools 6.0.0 beta 21。使用的是测试版,想到正式Vue3发布这么久了打算更新一下,用上最新的正式版(保持最新——来自程序员的执念)。但因为国内无法访问谷歌商店,因此也就无法直接获取Vue 的开发工具插件。这时候有两个方法摆在眼前,一个是科学上网获得,另一个是找到源码自己打包。这俺果断选择后者,科学上网有啥意思?自己打包不香吗?科学上网那是一个有志青年应该干的事吗?(手动狗头)下面开始操作。

获取源码

想要获取源码?这还用想吗?github啊!直接搜vuejs/devtools。找到地址,复制地址(项目地址:https://github.com/vuejs/devtools.git),克隆源码一气呵成。
在这里插入图片描述

安装依赖

看到yarn.lockpackage.json两个文件,我想都没写直接cd进入项目。啥都不干依赖先装上,依赖都装不上还搞啥?

yarn install

在这里插入图片描述
依赖安装完成之后,查看最近发布的版本是啥切换到对应的tag上(这是最快的查看方法,当然也可以查看git打的标签)
在这里插入图片描述
明显的看到最近释放的版本是v6.1.4,使用git将切换到标签上

git checkout v6.1.4

打包项目

观察package.json中的脚本,看源码不容易,启动一个项目跑通一个项目还不简单。

在这里插入图片描述
明显能看出releaserelease:beta是发布用的,后者是发布测试版的。运行脚本跑起来。

yarn release

在这里插入图片描述

输入版本号确认(版本号输入无所谓啦,大于当前的版本就ok了,执着的话可以看看它是怎样限制版本号的改下配置)
出现了报错
在这里插入图片描述
仔细一看命令rm -rf ./build这一看就是Linux或Mac系统的删除文件夹的命令,用windows系统不报错才怪呢。这个命令不难发现就是用来清空以前打包的文件的,没有实际意义直接删掉。这命令出现在好几个位置,这里我直接给出了

  1. shell-chrome文件的package.json的build的命令,去除与符号(&&)以及它之前的清空命令
  2. shell-electron文件的package.json的build:client和build:node的命令,去除与符号(&&)以及它之前的清空命令

重新进行打包即可。

后面还会出现一些报错不过那并不重要,那个是发布插件的报错没有作者没有账号。肯定是要报错的。但我们要的东西已经有了,如果实在不想看到这个报错可以将release命令修改一下,将npm run pub命令去掉应该就行了(俺没验证)
在这里插入图片描述

安装devtools工具

在dist文件夹下可以看到两个压缩包一个是火狐的扩展另一个是Chrome的扩展,自己解压安装就ok了(俺懒得写了)。
在这里插入图片描述
打包好的文件白嫖地址


http://chatgpt.dhexx.cn/article/KGKy44wx.shtml

相关文章

DevTools 页面

DevTools基础内容 DevTools 扩展为 Chrome DevTools 添加了功能。它可以添加新的 UI 面板和侧边栏,与检查的页面交互,获取有关网络请求的信息等等。 DevTools 扩展可以访问一组额外的 DevTools 特定的扩展 API: devtools.inspectedWindowde…

vue devtools调试工具安装(详细)

Vue调试工具安装(vue devtools) 第一步:下载vue-devtools 创建一个空的文件夹,命名最好可以见名知意,复制目录后打开命令行 在cmd中进入此文件夹目录下,输入npm install vue-devtools命令开始下载&#xff…

浏览器 DevTools使用

原文地址 Start 本文将会介绍浏览器devtool的一些常用工具方法,这些工具能够以可视化的方式展现当前网页情况,我们也能快速定位代码问题,如果我们能很好的利用起来,那就能写出高质量代码。 Performance(重点) 强大的性能监控工具…

热部署Devtools

热部署Devtools 1.添加devtools到项目中 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependenc…

React-DevTools开发者工具安装

React开发者工具最简单的安装方式自然是科学上网&#xff0c;通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式&#xff1a;基于 react-devtools的GitHub项目源码编译进行插件安装。 目录 React-DevTools&#xff1a;GitHub项目地址 React-DevTools&#x…

react-devtools安装教程

有时候看网上各路大神&#xff0c;写如何安装react-devtools&#xff0c;大神就是大神&#xff0c;好多步骤一笔带过&#xff0c;导致一些学习者看的一脸懵逼&#xff0c;今天我给大家讲超级简单的react-devtools安装步骤&#xff0c;相信看过的小伙伴儿不存在懵逼状态&#xf…

VUE3 VUE-DEVTOOLS 安装

VUE3 Vue-Devtools 正确安装&#xff0c;亲测有效 写在前面正确的安装方式下载源码编译安装 写在前面 最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。 官方网址&#xff1a;Vue-Devtools。 对于Vue3&#xff0c;Vue-Devtools没有正式的发布&a…

如何在生产环境使用devtools?

经常会有在生产环境使用devtools插件的需求&#xff0c;但是看别人操作之后自己就老是忘记&#xff0c;在这儿记录一下在生产环境使用devtools的整个过程。 1、原理 其实是否使用devtools是根据Vue.config.devtools这个配置来决定的&#xff0c;这个配置在开发环境下会被设为t…

mac安装vue-devtools

一.先查看电脑是否安装了node 没有安装node则需要安装node mac 安装node.js 第一步&#xff1a;官网下载 访问nodejs官网&#xff0c;链接: https://nodejs.org/en/&#xff0c;选择红色选框内的点击安装。 LTS是稳定版。 Current是最新版本&#xff0c;最新的功能特性都在这…

devtool使用介绍(1)

devtool使用介绍1 SDK中devtool的工作流程2.4.1 使用 devtool add添加应用程序 SDK中devtool的工作流程 可扩展SDK的核心要件是一个命令行工具&#xff0c;称为devtool。该工具提供了许多功能&#xff0c;可以帮助你在可扩展的SDK中构建&#xff0c;测试和打包软件&#xff0c…

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

一、简介 vue-devtools是一款基于chrome游览器的插件&#xff0c;可以用于调试vue应用&#xff0c;也可以用来辅助我们找到各页面对应的Vue.js文件路径&#xff0c;这将极大地提高我们的开发和调试效率。 二、下载 下载路径&#xff1a;https://github.com/vuejs/vue-devtoo…

DevTools使用

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools&#xff0c;可以在平时中的开发调试中极大的提高效率。 使用快捷键ctrlshifti或者f12可以直接打开开发者工具。 在DevTools开发者工具一共有九个部分。 Element 在这张图中&#xff0c;右…

下载、编译、安装、使用 vue-devtools

不少人都想下载 vue-devtools插件&#xff0c;但又不会做&#xff0c;今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的&#xff0c;就是版本号 github/vuejs/devtools 目录 第一个方法&#xff1a;使用极简插件 第一步&#xff1a;查…

Vue调试工具vue-devtools的安装与使用

目录 前言 一、vue-devtools是什么&#xff1f; 二、vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三、vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用。 一、vue-devtools是什么&#xff1f; vue-devtools是一款基于chrome游览器…

devTools最新安装方法

VUE DevTools 最新安装方法 啊头疼&#xff01;最近学习vue&#xff0c;要用到devtools&#xff0c;网上搜索资料&#xff0c;发现都不行&#xff0c;然后就试了好久好久&#xff0c;终于&#xff0c;成功了&#xff0c;接下来划重点&#xff01;仔细看&#xff01;&#xff0…

Devtools的简单使用

一.Devtools作用 方便我们实时地观察自己写的数据和组件的状况等。 二.安装 极简插件_Chrome扩展插件商店_优质crx应用 <template><div class""></div> </template><script> export default {data() {return {name:芜湖, //单项数据…

devtools安装

文章目录 一、devtools安装二、参考、推荐、补充 一、devtools安装 vue官网上找到vue-devtools的GitHub项目 https://github.com/vuejs/devtools 我选择放在E盘中新建的devtools文件中&#xff0c;解压 进入解压好的devtools-main文件夹中 这里默认已经下载了node 然后在…

使用浏览器这么多年,你真的了解DevTools吗?

Devtools是Web测试时每天都要用的工具&#xff0c;它提供了很多调试功能&#xff0c;可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集&#xff0c;很多功能并没用到过。 作为高频使用的工具&#xff0c;还是有必要好好掌握的。测试时在日常工作中提BUG…

前端开发工具DevTools的详细知识点总结(一)

文章目录 打开DevTools元素面板Style面板Computed面板devtools取色器 控制台面板基本功能介绍控制台应用 网络面板功能区介绍分析请求 结语 打开DevTools devtools,即Chrome 开发者工具&#xff0c;Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具&#xff…

最新版的配置热加载工具DevTools

最新版的配置热加载工具 DevTools 在SpringBoot开发调试中&#xff0c;如果我每行代码的修改都需要重启再调试&#xff0c;可能比较费时间&#xff1b;SpringBoot团队针对此问题提供了spring-boot-devtools&#xff08;简称devtools&#xff09;插件&#xff0c;用此插件提升开…