程序员经验分享-hwhale

超详细Vue Devtools的下载和安装——Vue的调试工具

2023-11-19

在使用 Vue 时，我们推荐在浏览器上安装 Vue Devtools。
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用。

  1. 下载
    Github下载地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1
    百度云下载地址：https://pan.baidu.com/s/1s0-hFklyNZ-4iYkjcuqR2g
    提取码：hsib
    在这里插入图片描述
  2. 解压下载的文件，在这里解压到D:/Vue下。
    在这里插入图片描述
    在这里插入图片描述
  3. 在命令行中切换到解压好的vue-devtools-5.1.1目录，使用cnpm install命令进行依赖安装。
    在这里插入图片描述
  4. 依赖包下载完后执行npm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。
    在这里插入图片描述
  5. 扩展Chrome插件
    打开Chrome浏览器–>选择更多工具–>扩展程序–>打开开发者模式,点击“加载已解压的扩展程序”,选择 vue-devtools5.1.1 > shells > chrome 放入。如果看不到“加载已解压的扩展程序…”按钮，先勾选“开发者模式”。
    在这里插入图片描述
  6. 安装成功如下图:
    在这里插入图片描述
  7. vue-devtools的使用
    安装后, 需要关闭浏览器, 再重新打开, 才能使用。
    运行vue项目时, 打开F12, 选择“vue”就可以使用了。vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试。
    在这里插入图片描述
    欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

vue

前端

前端框架

超详细Vue Devtools的下载和安装——Vue的调试工具 的相关文章

  • 如何将vue文件样式提取到一个单独的style.css文件中

    我正在使用 vue loader 默认情况下 对于每个 vue 文件 您的视图中都有一个样式标签 这不是一件好事 根据 vue loader 文档我可以做到这一点 https vue loader vuejs org en configur

  • 如何将子集合添加到 Firestore 中的文档？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 没有关于如何在Firestore中的文档中添加子集合的文档 那么如何使用Web应用程序添加子集合 我尝试了这个但没有成功 如何使用代码

  • 使用 Vue.js 附加 HTML 元素

    所以我对此真的很陌生Vue js我想要实现的目标很简单 我试图附加这个结果Ajax请求进入我的列表 div div

  • 如何从特定索引渲染 v-for

    我想在 v for 中循环假设从数字 5 到 10 循环希望在 5 点开始并在 10 点结束 我试过这个 div div 但我想要更有效的循环方式 有谁知道如何让循环从 5 开始 对于你的例子来说是可能的 div some code her

  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo

  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import

  • ExpressJS - 提供通用 Nuxt 应用程序和 AngularJS SPA

    我有一个具有以下结构的博客项目 服务器 用 Node Express 编写 管理员 AngularJS SPA public AngularJS SPA 目前 管理部分和公共部分具有相同的域 但管理部分使用不同的子域 这允许我在 Expre

  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件？

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an

  • 作为对象访问 vue-i18n 消息

    我想创建一个取决于页面的动态滑块 security signin slide1 Kitten1 slide2 Kitten2 signup slide1 Kitten1 slide2 Kitten2 slide3 Kitten3 问题是我想

  • @apply 在 Laravel Mix 中的 Vue 组件内不起作用

    我在 Laravel 中使用 Tailwind CSS 和 VueJS 组件 如下所示

  • 将选定的值传递给 vuejs 函数

    如何将选定的值传递给 vuejs 函数 v model我猜不会有帮助 我需要在之后设置过滤器的值item items orderBy sortKey reverse where reverse and sortKey是动态值 html

  • vuetify 中的 v-app-bar 和 v-toolbar 有什么区别？

    我刚刚开始探索vuetify http vuetifyjs com 所有 vuetify 组件都位于

  • Vue 2 日期选择器组件

    我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件 但在选择日期后尝试更新输入时遇到困难 这是我的代码 Vue component datepicker template

  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向

  • Vue-Router 抽象父路由

    我正在尝试将当前网站迁移到 vuejs 站点地图必须是 login signup password reset browse search dozens of other routes 由于其中一些路线共享大量 fx 因此我将它们设为父路线

  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴

  • 如何在Vue.js中格式化当前日期格式

    我需要获取当前日期Vue js 为此 我使用了以下方法 today date new Date toJSON slice 0 10 replace g today date将给出日期2019 09 11格式 有什么方法可以自定义这种格式吗

  • 如何切换各个
  • 元素的类？

    • 当我切换变量时active在下面的代码中 activeCSS 类应用于列表中的所有元素 从列表中的所有元素中删除 如何单独定位列表元素 Todo List 示例具有类似的功能 待办事项 待办事项已完成 但它有点超出了我的技能范围 ul li

  • 使用 nuxt/content 显示从数据库获取的 markdown

    我在我的应用程序中使用 nuxt content 它工作正常 在应用程序的另一部分 我想从数据库中获取一些降价并显示它 let mytext Some markdown fetched from a db here

  • 在Vue.js 3中添加全局变量

    如何在 Vue js 3 中添加全局变量 在 Vue js 2 中 我们在main js file Vue prototype myGlobalVariable globalVariable 最直接的替换就是app config globa

随机推荐

  • 风口之上，为什么说区块链能改变世界？

    近几年 区块链被炒得热火朝天 各大媒体都能看见区块链的身影 其中很多甚至开设了区块链或比特币频道 你甚至很难找到一个科技或垂直网站 在标题中没有至少一篇意为 区块链改变世界 的文章 它们想传达的是 比特币和其他加密货币底层的区块链技术是如何

  • Idea 报Error:java:无效的源发行版13

    首先打开自己的项目 点击File gt Settings进入界面找到如图位置 并将相信应位置设置成自己的安装版本号 本人使用 1 8版本 别忘了点击OK 下一步 点击File选择Project Structure 进入 还是看自己的安装版本

  • java如何查询并显示一个表,如何从表中获取数据并将其显示在Java的另一个表中？...

    将数据从一个表复制到另一个表的Netbean项目 希望这可以帮助 import javax swing table DefaultTableModel To change this license header choose License

  • 概率论【离散型二维变量与连续性二维变量（下）】--猴博士爱讲课

    6 连续型二维变量 下 1 7 求边缘分布函数 边缘概率密度 边缘概率密度 2 7 求边缘密度函数 边缘概率密度 3 7 判断连续型二维变量的独立性 F x y Fx X Fy Y 那么X Y互相独立 f x y fx X fy Y 那么X

  • 【论文阅读 08】Adaptive Anomaly Detection within Near-regular Milling Textures

    2013年 太老了 先不看 比较老的一篇论文 近规则铣削纹理中的自适应异常检测 1 Abstract 在钢质量控制中的应用 我们提出了图像处理算法 用于无监督地检测隐藏在全局铣削模式内的异常 因此 我们考虑了基于全局傅里叶的方法和局部剪切波

  • php判断2个多维数组是否相同,PHP如何判断一个数组是一维还是多维

    什么叫多维数组呢 多维数组 本质上是以数组作为数组元素的数组 二维数组又称为矩阵 一个数组的元素如果是一维数组 那么我们就称这个数组是二维数组 怎么判断一个数组是否是一维数组呢 通过count 函数 int count mixed var

  • 【FPGA】：频率测量

    转载 1 FPGA频率测量的三种方法 直接测量法 间接测量法 等精度测量法

  • Go中sync 包的 Once 使用

    文章目录 背景 One 简介 示例 注意 源码解读 背景 在系统初始化的时候 某些代码只想被执行一次 这时应该怎么做呢 没有学习 Once 前 大家可能想到 声明一个标识 表示是否初始化过 然后初始化这个标识加锁 更新这个标识 但是学会了

  • .net IOC之Spring.Net

    一 开发环境 编译器 VS2013 Net版本 net framework4 5 二 涉及程序集 Spring Core dll 1 3 Common Logging 三 开发过程 1 项目结构 2 添加Person cs namespac

  • 数码管电子时钟

    文章目录 前言 一 回顾数码管 二 任务描述 三 系统框图 四 模块调用 五 模块原理图 六 工程源码 6 2 时钟计数模块代码 6 2 数码管驱动模块代码 6 3 顶层模块代码 七 仿真测试 7 1 测试代码 7 2 仿真结果 八 管脚信

  • networkmanager无法打开

    中午登录ubuntu刚要连接无可线发现个的问题 无线的图标不见了 这可肿么办啊 怎么找都找不到 开始想系统还原 后来发现还挺麻烦的 毕竟菜鸟 系统方面的还不怎么懂 幸好有两台电脑 可以google 唉 最近两天google也不正常 今天也不

  • Llama 美洲鸵（大羊驼）改进之一：均方层归一化RMSNorm

    Layer Normalization LayerNorm Root Mean Square Layer Normalization RMSNorm 原理 对特征张量按照某一维度或某几个维度进行0均值 1方差的归一化 操作 LayerNor

  • 神经网络控制系统的特点,神经网络控制的优点

    什么是神经网络控制 神经网络控制技术是一项复杂的系统控制技术 一般应用在变频器的控制中 它是通过对系统的辨识 运算后对变频器进行控制的一种新技术 而且神经网络控制可以同时控制多个变频器 所以应用在多个变频器级联控制中比较合适 谷歌人工智能写

  • angularjs官方教程中的两处错误

    看到官方教程中HTTP小节之前还在向同事夸angularjs的教程做的厚道 没有什么坑 结果到http就出现了 发现了两处错误 度娘各种搜索没有发现相关的帖子 于是记录下来 希望能被高效收录 以解广大IT民工之困扰 getHero id n

  • stream流常用

    从一个List中获得每个object的对象的id组成一个list List

  • 卓越性能代码_「Win」被隐藏起来的卓越性能模式，为何不想让人发现？

    前言 众所周知 电脑电源管理中包含三大模式 分别是 节能模式 平衡模式 高性能模式 其对电脑的性能影响还是比较大的 但是今天所说的 卓越性能模式 应该很多人都没听说过 又是何方神圣 其为何要隐藏起来不想被人发现 如何开启 卓越性能 模式 右

  • LLaMA微调记录

    本文基于开源代码https github com Lightning AI lit llama tree main执行微调 其他参考链接 Accelerating LLaMA with Fabric A Comprehensive Guid

  • 实验二：使用KMP算法实现字符串的匹配

    1 实验目的 熟练的掌握数据结构中串这种数据类型 学会使用相较于朴素的模式识别算法更加先进的KMP算法进行识别和匹配 同时 在数据结构试验之中熟悉和了解串的性质和使用方法 2 实验要求 输入 通过命令行参数输入原字符串和模式字符串 输出 1

  • 全排列问题

    问题描述 给定一个由不同的小写字母组成的字符串 输出这个字符串的所有全排列 我们假设对于小写字母有 a lt b lt lt y lt z 而且给定的字符串中的字母已经按照从小到大的顺序排列 输入 输入只有一行 是一个由不同的小写字母组成的

  • 超详细Vue Devtools的下载和安装——Vue的调试工具

    在使用 Vue 时 我们推荐在浏览器上安装 Vue Devtools Vue Devtools 是 Vue 官方发布的调试浏览器插件 可以安装在 Chrome 和 Firefox 等浏览器上 直接内嵌在开发者工具中 使用体验流畅 Vue D

热门标签