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

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

news 2026/2/9 10:28:15

以下文章来源于前端充电宝 ，作者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





















手游刚开服就被攻击怎么办？如何防御DDoS？




开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...






编程新知
2026/2/8 4:37:03



















Linux简单的操作




ls 
ls                  查看当前目录 
ll                   查看详细内容 
ls -a              查看所有的内容 
ls --help        查看方法文档 pwd 
pwd        查看当前路径 cd 
cd        转路径 
cd ..                 转上一级路径 
cd 名                转换路径 
…...






编程新知
2026/1/20 14:36:39



















测试markdown--肇兴




day1&#xff1a; 
1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...






编程新知
2025/12/14 11:45:02



















（二）原型模式




原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 
一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 
📌 核心特点： 避免重复初…...






编程新知
2026/2/7 10:59:04



















涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战




“&#x1f916;手搓TuyaAI语音指令  &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916;  Otto机器人 → 直接点明主体  手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...






编程新知
2026/1/30 16:09:53



















JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案




JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 
1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...






编程新知
2026/2/7 11:25:15



















项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）




Redis无法正确连接 
在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 
1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 
步骤&#xff1a; 
1&#xff09;.修…...






编程新知
2026/2/8 14:19:47



















基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解




JAVASQL电子通讯录带系统托盘 
一、系统概述 
本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...






编程新知
2025/10/4 20:58:43



















VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP




编辑-虚拟网络编辑器-更改设置   选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09;  windows连接的网络点击查看属性  编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式  静态ip设置&#xff1a; 我用的ubuntu24桌…...






编程新知
2026/2/9 3:25:41



















MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）




macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...






编程新知
2026/1/28 10:57:16