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

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

news 2026/2/9 4:09:03

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





















web vue 项目 Docker化部署




Web 项目 Docker 化部署详细教程 目录 
Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 
Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...






编程新知
2025/8/12 16:28:43



















springboot 百货中心供应链管理系统小程序




一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...






编程新知
2026/2/8 20:41:49



















基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真




目录 
1.程序功能描述 
2.测试软件版本以及运行结果展示 
3.核心程序 
4.算法仿真参数 
5.算法理论概述 
6.参考文献 
7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...






编程新知
2026/2/6 5:38:46



















多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验




一、多模态商品数据接口的技术架构 
&#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...






编程新知
2025/7/23 3:55:49



















页面渲染流程与性能优化




页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 
1. 构建DOM树 
浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; 
(…...






编程新知
2026/1/31 11:58:35



















什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南




文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...






编程新知
2025/10/2 17:12:14



















ip子接口配置及删除




配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 
永久的 [应用] 
vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 
TYPE"Ethernet"
BOOTPROTO"none"
NAME"eth0"
DEVICE"eth0"
ONBOOT&q…...






编程新知
2025/10/26 5:04:25



















Python 包管理器 uv 介绍




Python 包管理器 uv 全面介绍 
uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...






编程新知
2026/2/7 10:47:09



















视觉slam十四讲实践部分记录——ch2、ch3




ch2 
一、使用g++编译.cpp为可执行文件并运行(P30) 
g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 
mkdir build
cd build
cmake ..
makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...






编程新知
2026/2/6 15:56:54



















AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机




这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...






编程新知
2026/2/5 18:58:39