Vue DevTools

news2024/11/25 2:28:07

介绍

在这里插入图片描述

什么是 Vue DevTools？

Vue DevTools 是一款旨在增强 Vue 开发者体验的工具，它是一款功能强大且用途广泛的工具，可以在使用 Vue 应用程序时显着提高您的生产力和调试能力。它的实时编辑、时间旅行调试和全面检查功能使其成为任何Vue.js开发人员的必备工具。

为什么要使用 Vue DevTools？

Vue DevTools 提供了几个优势，可以显著增强您的开发过程和Vue.js应用程序的调试体验：

  • 实时编辑属性：Vue DevTools 允许你直接实时编辑属性并立即看到反映的更改。此功能对于快速测试更改特别有用，而无需重新启动应用程序或手动更新代码。
  • 时间旅行调试：最强大的功能之一是它能够执行时间旅行调试。这意味着您可以在任何时间点检查商店的状态，从而跟踪错误并了解应用程序的状态如何随时间变化。
  • Vue Router 集成：查看路由列表及其详细信息。
  • Pinia 集成：该工具将所有发出的事件收集到一个位置，允许您监控和跟踪应用程序的自定义事件，包括每个事件的源组件、名称、大小和有效负载。此功能可用于识别性能瓶颈和优化应用程序。
    和其他有用的功能。

安装方式

有多种选项可以将此工具添加到您的项目中，确保它无缝地融入您的开发工作流程。无论你是在使用 Vite 处理Vue.js项目、独立的 Vue.js 应用程序还是 Web 应用程序，Vue DevTools 都能提供符合你需求的解决方案：

在这里插入图片描述

兼容性说明
DevTools 仅与 Vue 3 兼容。如果你还在使用 Vue2，请改用 vue-devtools。

建议
如果您使用的是Nuxt，请使用nuxt-devtools以获得更强大的开发人员体验。

图形界面

概述

显示应用的快速概览，包括 Vue 版本、页面和组件。
在这里插入图片描述

页面

“页面”选项卡显示您当前的路线以及一些有用的信息，并提供在页面之间导航的快速方法。您还可以使用文本框查看每个路由的匹配方式。
在这里插入图片描述

组件

“组件”选项卡显示组件信息，包括节点树、状态等。并提供一些交互功能，例如编辑状态、滚动到组件等。
在这里插入图片描述

资产

“资产”选项卡显示项目目录中的文件，您可以通过一些有用的操作查看所选文件的信息。
在这里插入图片描述

时间线

“时间轴”选项卡允许您浏览状态或事件的先前版本。
在这里插入图片描述

路由器

Router tab 是与 vue-router 集成的一个功能，允许你查看路由列表及其详细信息。
在这里插入图片描述

pinia

Pinia 选项卡是与 pinia 集成的一项功能，允许您查看商店列表及其详细信息，并编辑状态。
在这里插入图片描述

图

“图形”选项卡显示模块之间的关系。

在这里插入图片描述

设置

“设置”选项卡提供了一些用于自定义 DevTools 的选项。

在这里插入图片描述

检查

Inspect 公开了 vite-plugin-inspect 集成，允许您检查 Vite 的转换步骤。
在这里插入图片描述

检查员

Inspector 公开了 vite-plugin-vue-inspector 集成，你可以检查你的应用的 DOM 树，看看哪个组件在渲染它。找到进行更改的地方要容易得多。
在这里插入图片描述

独立窗口

Vue DevTools 能够作为一个单独的窗口运行，当你想在小屏幕上调试你的应用程序时，它非常有用。
在这里插入图片描述

命令面板

命令面板是访问 DevTools 的一些有用功能的快速方法，例如轻松导航、运行命令和 Vue 文档。您可以使用或快捷方式打开它。ALT+K Cmd+K
在这里插入图片描述

多应用支持

如果你的应用使用多个 Vue 实例，你可以在 DevTools 的左上角在它们之间切换。
在这里插入图片描述

分屏

分屏是一项有用的功能，可以同时使用多个选项卡。可以从命令面板打开它，也可以单击 DevTools 左上角的 打开它，然后从那里激活它。Vue Icon
在这里插入图片描述

安装指南

Vite插件

安装

# npm
npm add -D vite-plugin-vue-devtools

# pnpm
pnpm add -D vite-plugin-vue-devtools

# yarn
yarn add -D vite-plugin-vue-devtools

# bun
bun add -D vite-plugin-vue-devtools

用法

//  Configuration Vite

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

  /**
   * Enable vue component inspector
   *
   * @default true
   */
  componentInspector?: boolean | VitePluginInspectorOptions

  /**
   * Target editor when open in editor (v7.2.0+)
   *
   * @default code (Visual Studio Code)
   */
  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | string

  /**
   * Customize openInEditor host
   * @default false
   * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
   */
  openInEditorHost?: string | false

  /**
   * DevTools client host
   * useful for projects that use a reverse proxy
   * @default false
   * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
   */
  clientHost?: string | false
}

浏览器扩展

功能尚在开发中

独立应用程序

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

在这里插入图片描述

安装

全局安装软件包：
# npm
npm add -g @vue/devtools

# pnpm
pnpm add -g @vue/devtools

# yarn
yarn global add @vue/devtools

# bun
bun add -g @vue/devtools
或者本地作为项目依赖项：
# npm
npm add -D @vue/devtools

# pnpm
pnpm add -D @vue/devtools

# yarn
yarn add -D @vue/devtools

# bun
bun add -D @vue/devtools

用法

使用全局包

全局安装包后，运行：

vue-devtools

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

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

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

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

提示
< your-local-ip >通常看起来像这样： .192.168.x.x

注意
在部署到生产环境之前，不要忘记将其删除！

使用依赖包

将包安装为项目依赖项后，运行：

./node_modules/.bin/vue-devtools

提示
还可以使用全局启动应用，但在这种情况下，可能需要检查本地版本是否与全局版本匹配，以避免任何不兼容。vue-devtools

然后直接将其导入到您的应用中：

import { devtools } from '@vue/devtools'

并连接到主机：

if (process.env.NODE_ENV === 'development')
  devtools.connect(/* host (the default is "http://localhost"), port (the default is 8090) */)

重要
在创建 Vue App 之前，请确保调用 devtools connect 函数，否则它可能无法按预期工作。

host - 是一个可选参数，它告诉应用程序 DevTools 中间件服务器运行的位置，如果您在计算机上调试应用程序，则不必设置此设置（默认值为 ），但如果要在移动设备上调试应用程序，则可能需要传递本地 IP（例如）。http://localhosthttp://192.168.1.12

port - 是一个可选参数，用于告知应用程序在哪个端口上运行 DevTools 中间件服务器。如果使用代理服务器，则可能需要将其设置为不会将端口添加到连接 URL。null

常见问题

1.如何更改devtools服务器运行的端口？

您可以通过在运行之前设置环境变量来更改它：

PORT=8000 vue-devtools

然后，在您的应用中，您必须设置：

window.__VUE_DEVTOOLS_PORT__ = 8000

或者使用新端口更新连接方法：

devtools.connect(/ host /, 8000)
2. 如何远程检查服务器上的页面？

为此，您可以使用代理。你可以在这里下载它。ngrok
启动 vue-devtools 后，运行：

ngrok http 8098

然后相应地更新主机和端口：

devtools.connect('https://example.ngrok.io', null)

请确保将 port 设置为 或 ，因为主机已经代理到我们在第一个命令中定义的正确端口。null false ngrok

3. 如何检查通过？HTTPS

为此，您还可以使用 ngrok，因为它会自动将 https 请求代理为 http。请查看问题 2 以获取说明。

4. 如何检查 cordova 应用？

确保下面的页面在您的设备/模拟器上返回 javascript 代码。如果没有 - 请务必检查您的防病毒或路由器/防火墙设置。如果有效 - 请按照说明进行操作，并使用您的 IP 连接到 devtools。例如：http://your-ip:8098

import devtools from '@vue/devtools'
import Vue from 'vue'
// ...

function onDeviceReady() {
  devtools.connect('http://192.168.xx.yy') // use your IP
}

if (window.location.protocol === 'file:')
  document.addEventListener('deviceready', onDeviceReady, false)

else
  onDeviceReady()

这仅适用于应用的构建。development

Vue3快捷安装

安装vue3项目

# npm
npm create vue@latest

# pnpm
pnpm create vue@latest

# yarn
yarn create vue@latest

# bun
bun create vue@latest

安装Vue DevTools插件

可选功能提示添加 Vue DevTools

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Visual Studio Code 中使用

终端输出

在开发工具运行项目 npm run dev，会在控制台输出：

  VITE v5.3.1  ready in 2210 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
独立窗口
http://localhost:5173/__devtools__/

在这里插入图片描述

快捷打开方式

浏览器中快捷键打开 DevTools 工具

Shift + Alt + D

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1849619.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VLAN单臂路由

VLAN单臂路由

1、搭建网络 搭建拓扑、规划IP、划分网段 2、交换机配置 配置脚本&#xff08;设置trunk和创建vlan很重要&#xff09; Switch>enable Switch#conf t Enter configuration commands, one per line. End with CNTL/Z.//创建vlan20 Switch(config)#vlan 20 Switch(config…
阅读更多...
react学习——08三点运算符

react学习——08三点运算符

1、代码 let arr1[1,3,5,7,9]let arr2[2,4,6,8,10]console.log(...arr1);//展开一个数组let arr3[...arr1,...arr2]//连续数组//在函数中使用function sum (...numbers){console.log(,numbers)numbers.reduce((previousValue,currentValue)>{return previousValuecurrentVa…
阅读更多...
网优小插件_利用Power Automate Desktop抓取物业点信息

网优小插件_利用Power Automate Desktop抓取物业点信息

日常在无线网络优化&#xff0c;经常需要提取某一地市&#xff0c;某个属性物业点信息&#xff08;物业点名称、地址、及经纬度信息&#xff09;&#xff0c;本文利用Power Automate Desktop&#xff08;PRA&#xff09;和百度地图经纬度拾取网站&#xff0c;通过自动的方式抓取…
阅读更多...
[数据集][目标检测]棉花叶子害虫检测数据集VOC+YOLO格式571张1类别

[数据集][目标检测]棉花叶子害虫检测数据集VOC+YOLO格式571张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;595 标注数量(xml文件个数)&#xff1a;595 标注数量(txt文件个数)&#xff1a;595 标注类别…
阅读更多...
多线程环境下 System.out.println 导致死锁问题分析

多线程环境下 System.out.println 导致死锁问题分析

背景 一个文件采集系统&#xff0c;使用了多线程递归采集指定目录下的文件&#xff0c;并为每个目录创建一个线程去采集。 这个应用每隔几天就出现罢工情况&#xff0c;查看进程还在&#xff0c;堆内存空间还很充足&#xff0c;就是导出堆栈时&#xff0c;发现几乎所有的采集…
阅读更多...
Unity3d自定义TCP消息替代UNet实现网络连接

Unity3d自定义TCP消息替代UNet实现网络连接

以前使用UNet实现网络连接，Unity2018以后被弃用了。要将以前的老程序升到高版本，最开始打算使用Mirro，结果发现并不好用。那就只能自己写连接了。 1.TCP消息结构 (1). TCP消息是按流传输的，会发生粘包。那么在发射和接收消息时就需要对消息进行打包和解包。如果接收的消息…
阅读更多...
2024 年解锁 Android 手机的 7 种简便方法

2024 年解锁 Android 手机的 7 种简便方法

您是否忘记了 Android 手机的 Android 锁屏密码&#xff0c;并且您的手机已被锁定&#xff1f;您需要使用锁屏解锁 Android 手机&#xff1f;别担心&#xff0c;您不是唯一一个忘记密码的人。我将向您展示如何解锁 Android 手机的锁屏。 密码 PIN 可保护您的 Android 手机和 G…
阅读更多...
【数据结构】第十九弹---C语言实现冒泡排序算法

【数据结构】第十九弹---C语言实现冒泡排序算法

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、冒泡排序基本思想 2、代码的初步实现 3、代码的优化 4、代码的测试 5、时空复杂度分析 6、模拟实现qsort 6.1、冒泡排序函数 6.2、交换数…
阅读更多...
Android SurfaceFlinger——服务启动流程（二）

Android SurfaceFlinger——服务启动流程（二）

SurfaceFlinger 是 Android 系统中的一个核心服务&#xff0c;负责管理图形缓冲区的合成和屏幕显示&#xff0c;是 Android 图形系统的关键组件。 一、启动流程 SurfaceFlinger 作为一个系统服务&#xff0c;在 Android 启动早期由 init 进程通过 servicemanager 启动。它是作…
阅读更多...
Vue3中的常见组件通信（超详细版）

Vue3中的常见组件通信（超详细版）

Vue3中的常见组件通信 概述 ​ 在vue3中常见的组件通信有props、mitt、v-model、 r e f s 、 refs、 refs、parent、provide、inject、pinia、slot等。不同的组件关系用不同的传递方式。常见的撘配形式如下表所示。 组件关系传递方式父传子1. props2. v-model3. $refs4. 默认…
阅读更多...
[Django学习]前端+后端两种方式处理图片流数据

[Django学习]前端+后端两种方式处理图片流数据

方式1&#xff1a;数据库存放图片地址,图片存放在Django项目文件中 1.首先&#xff0c;我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下 from django.db import modelsclass Image(models.Model):title models.C…
阅读更多...
深度神经网络——什么是小样本学习？

深度神经网络——什么是小样本学习？

引言 小样本学习是指使用极少量的训练数据来开发人工智能模型的各种算法和技术。小样本学习致力于让人工智能模型在接触相对较少的训练实例后识别和分类新数据。小样本训练与训练机器学习模型的传统方法形成鲜明对比&#xff0c;传统方法通常使用大量训练数据。小样本学习是 主…
阅读更多...
aws的alb，多个域名绑定多个网站实践

aws的alb，多个域名绑定多个网站实践

例如首次创建的alb负载均衡只有www.xxx.com 需要添加 负载 test2.xxx.com aws的Route 53产品解析到负载均衡 www.xxx.com 添加CNAME&#xff0c;到负载均衡的dns字段axx test2.xxx.com 添加CNAME&#xff0c;到负载均衡的dns字段axx 主要介绍目标组和规则 创建alb就不介…
阅读更多...
MacOS 中 Agent 图标删除

MacOS 中 Agent 图标删除

这个是战网没有完全卸载赶紧导致的 在访达中点击前往文件夹&#xff0c;输入&#xff1a; /Users/Shared将对应的目录删掉即可。会提示需要输入密码。
阅读更多...
Java 从零开始写一个简单的图书管理系统

Java 从零开始写一个简单的图书管理系统

了解一下 先来了解要实现一个怎样的图书管理系统 从中可以看到有操作的 使用者 和 不同 的 功能 而不同的使用者有不同的 菜单 那要如何实现呢&#xff1f; 请继续看下去 如何实现 首先了解我们 需要什么 图书系统需要 书&#xff0c;放书的 书架 &#xff0c;用户 中有 管…
阅读更多...
Nutch爬虫在大数据采集中的应用案例

Nutch爬虫在大数据采集中的应用案例

引言 在当今信息爆炸的时代&#xff0c;大数据的价值日益凸显。网络作为信息的海洋&#xff0c;蕴藏着丰富的数据资源。Nutch&#xff0c;作为一个开源的Java编写的网络爬虫框架&#xff0c;以其高效的数据采集能力和良好的可扩展性&#xff0c;成为大数据采集的重要工具。本文…
阅读更多...
系统烧写工具--MfgTool

系统烧写工具--MfgTool

系统烧写工具--MfgTool 1 介绍1.1 概述1.2 UUU 特性1.3 UUU 功能1.4 UUU 命令1.5 MFGTools 功能 2 MFGTools 目录结构及说明2.1 MFGTools 目录结构重要文件烧写自己系统 2.2 说明2.3 分析配置文件2.3.1 UiCfg.ini2.3.2 cfg.ini2.3.3 ucl2.xml 3 MfgTool 工作流程4 烧录流程4.1 …
阅读更多...
mysql--安装跳过验证修改密码安全加固

mysql--安装跳过验证修改密码安全加固

安装mysql 配置mysql的yum源 [rootVM-0-14-rockylinux ~]# tee /etc/yum.repos.d/mysql.repo << EOF > [MYSQL] > namemysql > baseurlhttps://mirrors.tuna.tsinghua.edu.cn/mysql/yum/mysql-5.7-community-el7-x86_64 > gpgcheck0 > EOF yum安装mysq…
阅读更多...
python项目（课设）——飞机大战小游戏项目源码（pygame）

python项目（课设）——飞机大战小游戏项目源码（pygame）

主程序 import pygame from plane_sprites import * class PlaneGame: """ 游戏类 """ def __init__(self): print("游戏初始化") # 初始化字体模块 pygame.font.init() # 创建游戏…
阅读更多...
eclipse中svn从分支合并到主干及冲突解决

eclipse中svn从分支合并到主干及冲突解决

1、将分支先commit&#xff0c;然后再update&#xff0c;然后再clean一下&#xff0c;将项目多余的target都清理掉。 2、将branches切换到trunk 3、工程上右键-》Team-》合并&#xff08;或Merge&#xff09; 4、默认选项&#xff0c;点击Next 5、有未提交的改动&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023