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

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

news 2025/9/14 7:33:17

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





















国防科技大学计算机基础课程笔记02信息编码




1.机内码和国标码 
国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 
因此&#xff0c;我们的这个国…...






编程新知
2025/9/10 11:45:24



















7.4.分块查找




一.分块查找的算法思想&#xff1a; 
1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 
该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 
第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 
第二…...






编程新知
2025/9/2 17:00:34



















抖音增长新引擎：品融电商，一站式全案代运营领跑者




抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...






编程新知
2025/9/10 3:42:08



















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




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






编程新知
2025/7/25 23:24:13



















IT供电系统绝缘监测及故障定位解决方案




随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...






编程新知
2025/9/2 19:12:26



















AGain DB和倍数增益的关系




我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 
6dB对应的理论线性增益应为&…...






编程新知
2025/7/8 0:38:36



















Java求职者面试指南：计算机基础与源码原理深度解析




Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 
第一轮提问&#xff1a;基础概念问题 
1. 请解释什么是进程和线程的区别&#xff1f; 
面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...






编程新知
2025/8/8 2:00:22



















Caliper 负载(Workload)详细解析




Caliper 负载(Workload)详细解析 
负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 
一、负载模块基本结构 
一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...






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



















掌握 HTTP 请求：理解 cURL GET 语法




cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 
一、cURL 基本概念 
cURL 是 "Client URL" 的缩写…...






编程新知
2025/7/9 20:52:19



















Java数组Arrays操作全攻略




Arrays类的概述 
Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 
排序&#xff08;sort&#xff09; 
对数组进行升序…...






编程新知
2025/9/13 10:12:52