我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue 新一代开发者工具正式开源!

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue 新一代开发者工具正式开源!

图片

功能

首先来看看 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 {
  
  appendTo?: string | RegExp

  
  openInEditorHost?: string | false

  
  clientHost?: string | false
}

配置项如下:

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

独立应用

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

图片

首先, 通过以下命令来全局安装 DevTools(可以全局安装,也可以作为项目依赖项安装,这里以全局安装为例):

npm add -g @vue/devtools

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

vue-devtools

然后将以下代码添加到应用 HTML 文件的部分:

或者,如果想远程调试设备:


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

查看

  • 官网:https://devtools-next.vuejs.org/
  • Github:https://github.com/vuejs/devtools-next

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue 新一代开发者工具正式开源!

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue 新一代开发者工具正式开源!

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

低代码开发平台一个新时代的开发工具

低代码开发平台是一种新兴的开发工具,它可以大大减少开发人员的工作量,让他们可以更快地创建应用程序和网站。本文将详细介绍低代码开发平台SAAS,包括其特点、优势、使用场景和未来发展。一、什么是低代码开发平台SAAS?低代码开发平台是一种新兴的开发工具,它提供了一种简单的、直观的方式来创建应用程序和网站,无需编写大量
低代码开发平台一个新时代的开发工具
2023-12-17

IG、TikTok 为何注入 JS 代码,开发者推出开源工具一探究竟

本周,一件有关 iOS 隐私安全的事件在国外引发了热议,事件的起因是安全研究员 Felix Krause 发现 Meta 公司旗下的多款软件(Facebook、Instagram、Messenger)通过使用应用内网络浏览器(in-app

国产老牌PDF工具正式开源

近日开发者 @wmjordan 在 GitHub 平台正式开放了 PDF 补丁丁的源代码(除第三方组件外),供有心人学习 PDF 文档处理技术之用。
工具开源PDF2024-12-02

腾讯云发布云端开发者工具Cloud Studio 帮助开发者实现一站式开发

8月15日,腾讯云发布一站式云端开发工具Cloud Studio (https://ide.cloud.tencent.com),支持开发者利用Web IDE(集成开发环境),实现远程协作开发和应用部署。

开源定义者罕见发声:开源乱套了,正在定义新开源!开发者堪比”乞讨者、IBM过河拆桥

“我认为AI总是抄袭。当你训练模型时,你使用的是别人的版权作品来训练模型。而AI所做的就是混合和匹配,并完成内容输出。我们必须考虑一下,如何补偿那些用于训练模型的数据的所有人?我们应该用开源软件来训练它吗?我不这么认为。“
开源AI模型2024-11-30

Vue 团队正式开源 Rolldown:基于 Rust 的超快 JavaScrip 打包工具!

目前,Rollup 已成为业内领先的打包工具,其开创了 Tree Shaking 的概念。当 Vite 横空出世,它亦以Rollup 为构建核心,成为多个主流框架的首选构建工具。Rollup 已经从单纯的库打包工具,演变为现代前端开发的核心
VueRustGo2024-11-30

与全球开发者创新共赢 开发者村“1号店”即将正式开村!

近年来,东莞市立足“科技创新+先进制造”,开放和促进产业数字化场景,为全市产业数字化转型升级构建坚实的基础。
数字化2024-11-30

重磅!微软发布新一代 Teams 开发工具 —— Teams Toolkit!

在一年一度的 Build 大会上,微软正式发布了新一代的 Teams 开发工具 —— Teams Toolkit。

MLSQL 正式更名 Byzer ,打造新一代开源语言生态

开源项目MLSQL 宣布正式更名为 Byzer。Byzer 将秉持 MLSQL 低成本落地 Data + AI 的技术初衷,并融合更加开放且多元的语言及产品能力,打造更加完善的新一代开源语言生态。

如何正确的使用微信web开发者工具

如何正确的使用微信web开发者工具?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。为帮助开发者更方便、更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具。它是一个桌
2023-05-31

CMS插件开发的资源与工具:助力开发者高效创作

CMS插件开发是一项富有创造性和挑战性的工作,掌握了特定的资源和工具可以帮助开发者在创作过程中事半功倍,本文将介绍一些对CMS插件开发有益的资源和工具,助力开发者高效创作。
CMS插件开发的资源与工具:助力开发者高效创作
2024-02-05

与全球开发者创新共赢,全球首个“开发者村” 正式落成

4月26日,在“松山湖开发者生态创新峰会暨华为开发者大赛中国区启动仪式”上,东莞市委副书记、松山湖党工委书记刘炜,东莞理工学院党委书记成洪波,松山湖党工委副书记、管委会主任欧阳南江,东莞市工业和信息化局局长肖必良,松山湖党工委委员、管委会委
开发者村2024-11-30

Vue 开发者也要失业了?AI 工具 v0 已支持生成 Vue 代码了!

V0 是 @Vercel 公司创建的一个 AI 驱动工具,访问地址为 v0.dev[1]。输入简单的文本提示或上传图像即可生成 UI,最初生成的代码为 React 组件。
VueAI工具2024-11-29

Vite 未来使用的打包工具,正式开源了!

Rolldown 力图在最大程度上与 Rollup 的 API 和插件体系保持兼容,以简化用户的迁移过程。对于一些基础应用场景来说,Rolldown 有望直接替代现有工具。

Vite 3.0 正式发布,下一代前端工具链!

Vite 团队决定至少每年发布一个新的 Vite 主要版本,以与 Node.js 的 EOL 保持一致,并借此机会定期审查 Vite 的 API,为生态系统中的项目提供较短的迁移路径。

怎么开发一个node切换源小工具

这篇文章主要介绍“怎么开发一个node切换源小工具”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么开发一个node切换源小工具”文章能帮助大家解决问题。思路1,调用命令 设置源npm config
2023-07-05

热门标签

编程热搜

编程资源站

目录