当前位置： 首页 > news >正文

2023年新一代开发者工具 Vue ，正式开源！

news 2025/11/1 18:58:12

以下文章来源于前端充电宝 ，作者CUGGZ

近日，Vue 新一代开发者工具（DevTools）正式开源！Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看看新一代 Vue DevTools 的功能和使用方法。

官网：https://devtools-next.vuejs.org/

图片


功能

首先来看看 Vue DevTools 中都有哪些功能。

  • Overview：显示应用的概述，包括 Vue 版本、页面数量和组件数量。

图片

  • Pages：Pages 选项卡显示当前的路由以及相关信息，并提供在页面之间快速导航的方法，还可以使用文本框查看每个路由的匹配情况。

图片

  • Components：Components 选项卡显示组件信息，包括节点树、状态等，并提供一些交互功能，例如编辑状态、滚动到组件等。

图片

  • Assets：Assets 选项卡显示项目目录中的文件，可以查看所选文件的信息。

图片

  • Timeline：Timeline 选项卡可以浏览状态或事件的先前版本。

图片

  • Router：Router 选项卡与 vue-router 集成，可以查看路由列表及其详细信息。

图片

  • Pinia：Pinia 选项卡与 Pinia 集成，可以查看存储列表及其详细信息，并编辑状态。

图片

  • Graph：Graph 选项卡显示模块之间的关系。

图片

  • Settings：Settings 选项卡提供了一些用于自定义 DevTools 的选项。

图片

  • Inspect：Inspect 与 vite-plugin-inspect 集成，可以检查 Vite 的转换步骤。

图片

  • Inspector：Inspector 与 vite-plugin-vue-inspector 集成，可以检查应用的 DOM 树，并查看渲染它的组件，这样可以更轻松地找到需要进行更改的位置。

图片

  • 独立窗口：Vue DevTools 可以作为一个独立的窗口运行，当你想在小屏幕上调试应用时，它非常有帮助。

图片

使用

在 Vue 项目中使用 Vue DevTools 的方法有多种：

  • Vite 插件

  • 独立应用

  • Chrome 扩展（目前还在开发中）

图片


下面来看看如何通过 Vite 插件和独立应用来使用 Vue DevTools。

注意：

  • DevTools 仅兼容 Vue 3。如果使用 Vue2，请改用 vue-devtools。

  • 如果使用 Nuxt，请使用 nuxt-devtools 以获得更强大的开发者体验。

Vite 插件

第一种运行 Vue DevTools 的方法就是 Vite 插件。如果项目使用 Vite，强烈建议将其作为运行 DevTools 的首选项，因为它提供了更强大的功能。

注意：Vue DevTools 需要 Vite v3.1 或更高版本。

首先，通过以下命令来安装 Vue DevTools：

 

npm add -D vite-plugin-vue-devtools

 

用法：
 

 

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'export default defineConfig({plugins: [VueDevTools(),],
})

 

配置项：
 

 

interface VitePluginVueDevToolsOptions {/*** append an import to the module id ending with `appendTo` instead of adding a script into body* useful for projects that do not use html file as an entry** WARNING: only set this if you know exactly what it does.* @default ''*/appendTo?: string | RegExp/*** Customize openInEditor host (e.g. http://localhost:3000)* @default false*/openInEditorHost?: string | false/*** DevTools client host (e.g. http://localhost:3000)* useful for projects that use a reverse proxy* @default false*/clientHost?: string | false
}

 

配置项如下：
 

  •  
    appendTo：将一个导入附加到模块 id 以 appendTo 结尾，而不是将脚本添加到 <body> 中。对于不使用 HTML 文件作为入口的项目非常有用。注意，只有在确切了解其功能的情况下才设置此选项。默认值为 ''。
     
  •  
    openInEditorHost：自定义打开编辑器的主机（例如：http://localhost:3000）。默认值为 false。
     
  •  
    clientHost：DevTools 客户端主机（例如：http://localhost:3000），对于使用反向代理的项目非常有用。默认值为 false。
     
 

独立应用
 

如果使用不受支持的浏览器，或者有其他特定需求（例如应用位于 Electron 中），可以使用独立应用。
 

 

图片
 

首先， 通过以下命令来全局安装 DevTools（可以全局安装，也可以作为项目依赖项安装，这里以全局安装为例）：
 

 

npm add -g @vue/devtools

 

安装完成之后，在终端中运行以下命令：
 

 

vue-devtools

 

然后将以下代码添加到应用 HTML 文件的<head>部分：
 

 

<script src="http://localhost:8098"></script>

 

或者，如果想远程调试设备：
 

 

<script>window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhostwindow.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

 


 可以在官方文档查看详情：https://devtools-next.vuejs.org/guide/standalone
 

 

图片














相关文章：
















2023年新一代开发者工具 Vue ，正式开源！




以下文章来源于前端充电宝 &#xff0c;作者CUGGZ 近日&#xff0c;Vue 新一代开发者工具&#xff08;DevTools&#xff09;正式开源&#xff01;Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具&#xff0c;它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看…...






编程日记
2023/12/31 11:32:31



















springboot(ssm校园组团平台 高校组团系统 Java系统




springboot(ssm校园组团平台 高校组团系统 Java系统 开发语言&#xff1a;Java 
框架&#xff1a;ssm/springboot  vue 
JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 
服务器&#xff1a;tomcat 
数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 
数据库…...






编程日记
2023/12/31 11:28:27



















QT 利用开源7z 实现解压各种压缩包,包括进度条和文件名的显示(zip,7z,rar,iso等50多种格式)




想做一个winRAR一样的解压软件吗？很简单，利用开源的7z库就能实现。我看网上其他人说的方法不敢苟同，误人子弟。以前自己在项目中使用过7z，这次又有需要，就想记录下来。如果你研究过如何用7z的话，一定知道7z的每一个GUID都代表了一种格式，50多种GUID也就有50多个格式，最…...






编程日记
2023/12/31 11:24:24



















androidStudio 没有新建flutter工程的入口？




装了flutter dart 插件  
执行了 flutter doctor 
也执行了  flutter doctor --android-license 
最后重启了 androidStudio  还是没发现在哪新建flutter项目工程 原来 plugins 下的 Android APK Support没有勾选...






编程日记
2023/12/31 11:21:22



















微信小程序开发系列-03全局配置中的“window”和“tabBar”




微信小程序开发系列目录 
《微信小程序开发系列-01创建一个最小的小程序项目》《微信小程序开发系列-02注册小程序》《微信小程序开发系列-03全局配置中的“window”和“tabBar”》《微信小程序开发系列-04获取用户图像和昵称》《微信小程序开发系列-05登录小程序》《微信小程序…...






编程日记
2023/12/31 11:18:19



















基于CNN神经网络的手写字符识别实验报告




作业要求 具体实验内容根据实际情况自拟&#xff0c;可以是传统的BP神经网络&#xff0c;Hopfield神经网络&#xff0c;也可以是深度学习相关内容。 数据集自选&#xff0c;可以是自建数据集&#xff0c;或MNIST&#xff0c;CIFAR10等公开数据集。 实验报告内容包括但不限于&am…...






编程日记
2023/12/31 11:17:18



















Ubuntu 系统中安装和配置 clash




本博客参考 ubuntu下怎么安装clash-ghc? 和 对 clash 进行下载和配置&#xff0c;如有需要可自行点击链接查看原文。 
下载 clash 
打开终端&#xff08;进入到 主目录/用户目录 &#xff09;&#xff0c;通过命令下载 clash 文件并将其中命名为 clash&#xff1a; 
# 下载 cl…...






编程日记
2023/12/31 11:15:17



















DragonEnglish：COCA20000+单词+释义




去年的时候接触到了 COCA20000 单词&#xff0c;对这种给单词特定顺序的方式蛮感兴趣的。因为我当时接触的版本只有单词或者单词释义的版本&#xff0c;所以我直接通过各种方式给它搭配了音标例句发音&#xff0c;然后每100个切割成1份&#xff0c;分成了 202 个文件来学习&…...






编程日记
2023/12/31 11:14:15



















『亚马逊云科技产品测评』活动征文｜云服务器如何快速搭建个人博客（图文详解）




授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道  文章目录 引言一、前期准备步骤1.1 准备一个亚马逊 EC2 服务器1.2 进入控…...






编程日记
2023/12/31 11:12:14



















QT上位机开发（乘法计算小软件）




【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面一篇文章&#xff0c;我们学习了怎么创建qt的第一个工程&#xff0c;怎么用designer给qt修改界面。虽然我们到目前为止&#xff0c;还没有编写…...






编程日记
2023/12/31 11:11:12



















【Matlab】BP 神经网络时序预测算法




资源下载&#xff1a; https://download.csdn.net/download/vvoennvv/88681507 一&#xff0c;概述 BP 神经网络是一种常见的人工神经网络&#xff0c;也是一种有监督学习的神经网络。其全称为“Back Propagation”&#xff0c;即反向传播算法。BP 神经网络主要由输入层、隐藏层…...






编程日记
2023/12/31 11:10:11



















GPT在企业自动化方面的应用




GPT和类似的自然语言处理技术在企业自动化方面有许多应用。以下是一些主要的应用领域&#xff1a; 自动化客户支持&#xff1a; 使用GPT可以构建自动化的客户支持系统&#xff0c;能够理解和生成自然语言文本&#xff0c;回答常见问题&#xff0c;解决用户的疑问和问题。  自动…...






编程日记
2023/12/31 11:04:05



















STM32——通用计时器




通用计时器框图 1.时钟源 
1&#xff09;内部时钟(CK_INT) 2&#xff09;外部时钟模式 1&#xff1a;外部输入引脚(TIx)&#xff0c;x1&#xff0c;2&#xff08;即只能来自于通道 1 或者通道 2&#xff09; 3&#xff09;外部时钟模式 2&#xff1a;外部触发输入(ETR) 4&#…...






编程日记
2023/12/31 11:03:04



















【HarmonyOS】鸿蒙开发简介与项目基础配置演示




从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…...






编程日记
2023/12/31 11:02:03



















[MySQL] MySQL数据库创建存储过程




一、mysql存储过程的相关知识 
1.1 存储过程的概念 
存储过程是一组为了完成特定功能的SQL语句集合。类似于于其他编程语言中的函数&#xff0c;定义一个函数方法&#xff0c;可以随时起到传参调用的功能。 
存储过程在使用过程中是将常用或者复杂的工作预先使用SQL语句写好并用…...






编程日记
2023/12/31 11:01:02



















mysql哪些情况下不走索引？




mysql哪些情况下不走索引&#xff1f; 
MySQL是一种常用的关系型数据库&#xff0c;它使用索引来提高查询性能。然而&#xff0c;并非所有的SQL语句都能充分利用索引。在本文中&#xff0c;我们将介绍几个无法使用到索引的MySQL SQL语句。 
1. 使用函数&#xff1a;当SQL语句中…...






编程日记
2023/12/31 11:00:00



















蓝桥杯python比赛历届真题99道经典练习题 （13-20）




【程序13】 
题目：打印出所有的“水仙花数”，所谓“水仙花数”是指一个三位数，其各位数字立方和等于该数 本身。例如：153是一个“水仙花数”，因为153=1的三次方＋5的三次方＋3的三次方。 
1.程序分析：利用for循环控制100-999个数，每个数分解出个位，十位，百位。 
2.程序…...






编程日记
2023/12/31 10:58:59



















初识javaWeb




一、JavaWeb是什么&#xff1f; 
1、概念 javaWeb指的是使用java语言进行互联网领域项目开发的技术栈——进行web项目开发所需的技术的集合。 -Web前端——在浏览器中用户可以看到的网页 -Web后端——为前端提供数据的程序 2、Web项目 
java语言是可以进行多种类型的项目开发&a…...






编程日记
2023/12/31 10:54:55



















day5--java基础编程：异常，内部类




6 异常 
6.1 异常概述 出现背景&#xff1a; 在使用计算机语言进行项目开发的过程中&#xff0c;即使程序员把代码写得尽善尽美&#xff0c;在系统的运行过程中仍然会遇到一些问题&#xff0c;因为很多问题不是靠代码能够避免的&#xff0c;比如:客户输入数据的格式&#xff0c…...






编程日记
2023/12/31 10:53:54



















2023.12.28 关于 Redis 数据类型 List 内部编码、应用场景




目录 
List 编码方式 
早期版本 
现今版本 
List 实际应用 
多表之间的关联关系 
消息队列 
频道&#xff08;多列表&#xff09;消息队列 
微博 Timeline 
栈 & 队列 List 编码方式 早期版本 早期版本 List 类型的内部编码方式有两种 ziplist&#xff08;压缩列表&#xf…...






编程日记
2023/12/31 10:52:53





















业务系统对接大模型的基础方案：架构设计与关键步骤




业务系统对接大模型&#xff1a;架构设计与关键步骤 
在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...






编程新知
2025/10/30 10:46:50



















【第二十一章 SDIO接口(SDIO)】




第二十一章 SDIO接口 目录 
第二十一章 SDIO接口(SDIO) 
1 SDIO 主要功能 
2 SDIO 总线拓扑 
3 SDIO 功能描述 
3.1 SDIO 适配器 
3.2 SDIOAHB 接口 
4 卡功能描述 
4.1 卡识别模式 
4.2 卡复位 
4.3 操作电压范围确认 
4.4 卡识别过程 
4.5 写数据块 
4.6 读数据块 
4.7 数据流…...






编程新知
2025/10/27 4:18:37



















Java 加密常用的各种算法及其选择




在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 
一、对称加密算法…...






编程新知
2025/10/24 19:46:10



















相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）




【关注我，后续持续新增专题博文，谢谢！！！】 
上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...






编程新知
2025/10/22 15:29:45



















MySQL账号权限管理指南：安全创建账户与精细授权技巧




在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 
一、为何需要创建独立账号&#xff1f; 
最小权限原则&#xf…...






编程新知
2025/9/5 23:36:27



















CSS设置元素的宽度根据其内容自动调整




width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 
效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...






编程新知
2025/10/16 16:03:09



















Linux离线（zip方式）安装docker




目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 
操作系统信息 
OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; 
uname -rcat /etc/os-rele…...






编程新知
2025/6/16 16:58:04



















回溯算法学习




一、电话号码的字母组合 import java.util.ArrayList;
import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"",  //0"",  //1"abc", //2"…...






编程新知
2025/10/25 15:52:58



















动态 Web 开发技术入门篇




一、HTTP 协议核心 
1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09;  默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。  请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...






编程新知
2025/10/3 0:42:17



















深入理解Optional：处理空指针异常




1. 使用Optional处理可能为空的集合 
在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; 
// 传统判空方式
if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...






编程新知
2025/10/21 21:10:23