Vue DevTools

介绍

在这里插入图片描述

什么是 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.mfbz.cn/a/746738.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

程序员如何用ChatGPT解决常见编程问题：实例解析

程序员如何用ChatGPT解决常见编程问题：实例解析

引言 在现代编程的世界中&#xff0c;技术进步日新月异&#xff0c;程序员们面临着各种各样的挑战和问题。解决这些问题的过程中&#xff0c;找到合适的工具至关重要。ChatGPT作为一种先进的人工智能语言模型&#xff0c;能够帮助程序员迅速、高效地解决常见的编程问题。本文将…
阅读更多...
基于SpringBoot的学生综合测评系统

基于SpringBoot的学生综合测评系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot框架 工具&#xff1a;MyEclipse、Tomcat 系统展示 首页 系统首页&#xff0c;提供综合…
阅读更多...
【ajax07基础】回调函数地狱

【ajax07基础】回调函数地狱

一&#xff1a;什么是回调函数地狱 在一个回调函数中嵌套另一个回调函数&#xff08;甚至一直嵌套下去&#xff09;&#xff0c;形成回调函数地狱 回调函数地狱存在问题&#xff1a; 可读性差异常捕获严重耦合性严重 // 1. 获取默认第一个省份的名字axios({url: http://hmaj…
阅读更多...
LabVIEW电动汽车核心部件检测系统

LabVIEW电动汽车核心部件检测系统

LabVIEW开发的电动汽车核心部件检测系统&#xff0c;通过硬件接入板和数据采集卡实现信号采集和分析。系统具备智能诊断、模块化设计和用户友好的特点&#xff0c;能够快速、精确地定位故障&#xff0c;提高电动汽车的维护效率和可靠性&#xff0c;支持新能源汽车市场的快速发展…
阅读更多...
【Streamlit学习笔记】Streamlit-ECharts箱型图添加均值和最值label

【Streamlit学习笔记】Streamlit-ECharts箱型图添加均值和最值label

Streamlit-ECharts Streamlit-ECharts是一个Streamlit组件&#xff0c;用于在Python应用程序中展示ECharts图表。ECharts是一个由百度开发的JavaScript数据可视化库Apache ECharts 安装模块库 pip install streamlitpip install streamlit-echarts绘制箱型图展示 在基础箱型…
阅读更多...
深入探讨C++的高级反射机制（2）：写个能用的反射库

深入探讨C++的高级反射机制（2）：写个能用的反射库

在现代软件开发中&#xff0c;反射是一种强大的特性&#xff0c;它可以支持程序在运行时查询和调用对象的属性和方法。 但是在C中&#xff0c;没有内置的反射机制。我们可以通过一些巧妙的技术模拟反射的部分功能。 上一篇文章写了个简单的反射功能&#xff0c;这回完善一下&a…
阅读更多...
最新版Git安装指南使用指南

最新版Git安装指南使用指南

首先&#xff0c;访问Git的官方网站https://git-scm.com下载适用于您操作系统的安装包。您也可以选择使用阿里云镜像来加速下载过程。 也可以用国内地址下载https://pan.quark.cn/s/0293d76e58bchttps://pan.quark.cn/s/0293d76e58bc安装过程 在这里插入图片描述 2、点击“…
阅读更多...
前端 CSS 经典：backface-visibility 属性

前端 CSS 经典：backface-visibility 属性

前言&#xff1a;backface-visibility 属性可以使反转 180deg 的元素隐藏&#xff0c;使用这个属性实现卡片翻转效果 效果 代码实现 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-…
阅读更多...
重庆交通大学24计算机考研数据速览，专硕第二年招生，复试线321分！

重庆交通大学24计算机考研数据速览，专硕第二年招生，复试线321分！

重庆交通大学&#xff08;Chongqing Jiaotong University&#xff0c;CQJTU&#xff09;&#xff0c;是由重庆市人民政府和中华人民共和国交通运输部共建的一所交通特色、以工为主的多科性大学&#xff0c;入选“中西部高校基础能力建设工程”、“卓越工程师教育培养计划”、国…
阅读更多...
用jsp实现删除数据库表中的一行

用jsp实现删除数据库表中的一行

话不多说&#xff0c;直接上图 一.思路 运用<a>标签将数据送到目标页面&#xff0c;实现对一行的删除。 语法&#xff1a; 1:form表单提交到的目标页面 2&#xff1a;输入主码的input的id 3:获取主码的值 <a href"1&#xff1f;2<%3%>">删除</a…
阅读更多...
七天速通javaSE：第四天 递归算法

七天速通javaSE：第四天 递归算法

文章目录 前言一、递归的介绍二、递归模型&#xff08;n!&#xff09;1 阶乘的定义&#xff1a;2. 阶乘的递归代码实现3. 递推与回归的内部逻辑三、练习 前言 本文将学习递归算法。在计算机科学中&#xff0c;递归算法是一种将问题不断分解 为同一类子问题来解决问题的方法。递…
阅读更多...
网站推广如何做？这七个方法要知道

网站推广如何做？这七个方法要知道

在出海独立站商家中&#xff0c;推广是必不可少的环节。在你完成网站的搭建&#xff0c;产品的上架&#xff0c;以及网站的运营和优化后&#xff0c;你就可以开始着手推广你的网站了。你的网站是承载你的品牌和产品的主要平台&#xff0c;因此&#xff0c;你需要根据你的品牌和…
阅读更多...
Windows Nginx更新版本

Windows Nginx更新版本

一、准备新版安装包 nginx: downloadhttps://nginx.org/en/download.html 二、升级Nginx 1、备份原Nginx 2、上传新版Nginx 上传并解压 3、更新版本 1&#xff09;原文件夹更新 1.关闭nginx 查看原版本号 nginx -v 命今关闭 nginx -s stop 确认进程里没有nginx&#…
阅读更多...
ZGC垃圾收集的主要流程

ZGC垃圾收集的主要流程

值得说明的是&#xff0c;在执行就地迁移时&#xff0c;ZGC 必须首先压缩指定为对象迁移区域内的对象&#xff0c;这可能会对性能产生负面影响。增加堆大小可以帮助 ZGC 避免使用就地迁移。 如上图&#xff0c;ZGC 的工作流程主要包括以下几个步骤&#xff1a; &#xff08;STW…
阅读更多...
DVWA 靶场 SQL Injection 通关解析

DVWA 靶场 SQL Injection 通关解析

前言 DVWA代表Damn Vulnerable Web Application&#xff0c;是一个用于学习和练习Web应用程序漏洞的开源漏洞应用程序。它被设计成一个易于安装和配置的漏洞应用程序&#xff0c;旨在帮助安全专业人员和爱好者了解和熟悉不同类型的Web应用程序漏洞。 DVWA提供了一系列的漏洞场…
阅读更多...
jQuery+post 调用php接口实现md5编码器

jQuery+post 调用php接口实现md5编码器

https://andi.cn/page/621474.html
阅读更多...
Python+Vue+Springboot实现电脑端微信好友导入导出

Python+Vue+Springboot实现电脑端微信好友导入导出

主要实现思路是使用python的自动化库uiautomation进行客户端抓取联系人&#xff0c;vue做管理界面&#xff0c;springboot做后端服务。 截图如下 登录&#xff1a; 首页 好友导出 不足之处就是只有windows版本&#xff0c;mac上还不行 而且谷歌和edge浏览器的效果是最好的&a…
阅读更多...
面试-Java线程池

面试-Java线程池

1.利用Excutors创建不同的线程池满足不同场景的需求 分析&#xff1a; 如果并发的请求的数量非常多&#xff0c;但每个线程执行的时间非常短&#xff0c;这样就会频繁的创建和销毁线程。如此一来&#xff0c;会大大降低系统的效率。 可能出现&#xff0c;服务器在为每个线程创建…
阅读更多...
LAMP架构的源码编译环境下部署Discuz论坛

LAMP架构的源码编译环境下部署Discuz论坛

一、LAMP架构 LAMP架构是一种常见的用于构建动态网站的技术栈 组成功能Linux&#xff08;操作系统&#xff09;LAMP 架构的基础&#xff0c;用于托管 Web 服务器和应用程序Apache&#xff08;Web服务器&#xff09;接收和处理客户端请求&#xff0c;并将静态和动态内容发送给…
阅读更多...
20240626让飞凌的OK3588-C开发板在相机使用1080p60分辨率下预览

20240626让飞凌的OK3588-C开发板在相机使用1080p60分辨率下预览

20240626让飞凌的OK3588-C开发板在相机使用1080p60分辨率下预览 2024/6/26 15:15 4.2.1 全编译测试 在源码路径内&#xff0c;提供了编译脚本 build.sh&#xff0c;运行该脚本对整个源码进行编译&#xff0c;需要在终端切换到解压 出来的源码路径&#xff0c;找到 build.sh 文件…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站