浏览器扩展程序增加 vue_dev_tools 调试工具

1、引言

在做 Vue 项目的开发时,我们经常需要在页面上调试,接下来介绍如何在浏览器扩展程序增加 vue_dev_tools 调试工具。

Download the Vue Devtools extension for a better development experience

翻译:下载Vue Devtools扩展以获得更好的开发体验

2、下载相关插件

提供网盘下载地址:

https://pan.baidu.com/s/1aGWLhcwZP1SLjEmZvJmk_w?pwd=4zd5 提取码: 4zd5 

里面包含 vue2、vue3 的插件

3、操作流程

1、进入浏览器的扩展程序管理页面

点击浏览器右上角的“更多”,找到“扩展程序”,点击“管理扩展程序”

或者,在浏览器地址栏输入以下命令,进入扩展程序管理中心(以谷歌浏览器内核为例):

chrome://extensions

2、打开“开发者模式”

在右上角看到“开发者模式”,把它打开:

3、把下载好的插件复制(拖拽)到浏览器中

根据自己开发的情况需要,可以把 vue2 或者 vue3 的插件复制(拖拽)到浏览器中

4、找到 vue 扩展程序,把它固定在插件栏,方便使用

另外,如果有以下提示:

You are running Vue in development mode.Make sure to turn on production mode when deploying for production.

翻译:您正在开发模式下运行Vue。为生产部署时,请确保打开生产模式。

解决办法如下:

1、如果是在生产环境下,引入压缩版 js 库。开发的时候我们还是使用开发库,方便调试

2、打开我们引入的 vue.js 文件,搜索关键词:productionTip,把 true 改为 false

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

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

相关文章

C语言例4-30:将一个正整数的各位数字逆序输出

算法分析&#xff1a; 提取某一个正整数的最末一位数字&#xff0c;采用取模10的余数获得&#xff0c;以此类推即可。 代码如下&#xff1a; //将一个正整数的各位数字逆序输出 #include<stdio.h> int main(void) {int i,r;printf("输入一个正整数&#xff1a; \…

地方废物回收机构管理的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. …

雷尼绍 VIONiC高精度光栅尺品助力高精度运动控制系统

随着科技的不断进步&#xff0c;对运动控制精度的要求不断提高。雷尼绍Renishaw推出的VIONiC系列是一款超高精度、超小型的一体化数字增量式光栅&#xff0c;可提供直接的数字位置反馈&#xff0c;具有卓越的测量性能、极高的运行速度和可靠性&#xff0c;成为高精度运动控制系…

C语言-Win11安装古老的VC6.0

win11安装VC6 有些学校一直还在使用VC6.0&#xff0c;我们尝试在Win1 下安装这个老古董&#xff0c;以下是在win11下安装VC6.0的方法。 点击安装文件 输入产品序列号 修改公共安装文件夹 如果C盘空间足够可以不用修改。 此处会发现鼠标一直在转圈不能完成更新系统&#xff0c;可…

领导驾驶舱下钻404问题解决

领导驾驶舱下钻404问题解决 问题 领导驾驶舱点击下钻页面 报404, 涉及到学工系统和sso认证系统 思路 传参 https://xxx:9007/getLoginUrl 转发到 https://xxx/getLoginUrl 修改nginx配置 location /getLoginUrl {proxy_pass http://127.0.0.1:80;}报了500错误 清理缓存后…

9.windows ubuntu 子系统,centrifuge:微生物物种分类。

上次我们用了karken2和bracken进行了物种分类&#xff0c;这次我们使用centrifuge. Centrifuge 是一种用于快速和准确进行微生物分类和物种鉴定的软件。其主要功能包括&#xff1a; 快速分类和物种鉴定: Centrifuge 可以对高通量测序数据&#xff08;如 metagenomic 或 RNA-Se…

JAVA------基础篇

java基础 1.JDK JDK :java development kit JRE&#xff1a;java runtime environment JDK包含JRE java跨平台&#xff1a;因为java程序运行依赖虚拟机&#xff0c;虚拟机需要有对应操作系统的版本&#xff0c;而jre中有虚拟机。 当你想要在Linux系统下运行&#xff0c;则需要…

JavaScript 权威指南第七版(GPT 重译)(四)

第九章&#xff1a;类 JavaScript 对象在第六章中有所涉及。该章将每个对象视为一组独特的属性&#xff0c;与其他对象不同。然而&#xff0c;通常有必要定义一种共享某些属性的对象类。类的成员或实例具有自己的属性来保存或定义它们的状态&#xff0c;但它们还具有定义其行为…

vue3+vite - 报错 import.meta.glob() can only accept string literals.(详细解决方案)

报错说明 在vue3+vite项目中,解决报错: [plugin:vite:import-analysis] import.meta.glob() can only accept string literals. 如果我们报错差不多,就可以完美搞定这个错误。 解决教程 这个错误,是因为

3GPP 协议资料学习和文档下载

一、登录3GPP官网 3GPP – The Mobile Broadband Standard 二、选择Specifications Per TSG Round 三、选择ftp下载路径 四、选择不同阶段的3GPP协议 包含了从1999年到R18,甚至更新到当前最新的协议。 五、查看对应版本的LTE或者5G NR协议 其中LTE射频相关章节为36.521系列&…

进销存记账软件有哪些?中小商户的进销存记账管理软件选购指南

进销存记账软件已经成为众多实体店不可或缺的管理工具。利用这类软件&#xff0c;实体店能够解决手工记账效率低下、对账繁琐且容易出错等问题。 然而&#xff0c;许多实体店都是小本经营&#xff0c;对于进销存记账软件的选择缺乏经验&#xff0c;导致随意选购的结果往往令人…

C++开发基础理解std::string 对象的生命周期,避免悬空指针或内存访问错误

一、字符串的两种类型互换 在C开发中&#xff0c;const char * 和 std::string 是用于表示字符串的两种不同类型。它们之间可以相互转换。但是需要注意const char * 和 std::string 的互换场景错误。 const char * 到 std::string 的转换&#xff1a; 可以使用 std::string 的…

保研线性代数机器学习基础复习1

1.什么是代数&#xff08;algebra&#xff09;? 为了形式化一个概念&#xff0c;构建出有关这个概念的符号以及操作符号的公式。 2.什么是线性代数&#xff08;linear algebra&#xff09;&#xff1f; 一项关于向量以及操作向量的公式的研究。 3.举一些向量的例子&#x…

使用 Clip 反推提示词报<error>解决方案

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 本文主要介绍在使用 Stable Diffusion WebUI 中使用图生图中的“使用 Clip 反推提示词”时报了<error>异常的解决…

JSes6语法和Json快速入门

对象操作 对象的crud 创建对象&#xff1a;let obj{} 新增属性&#xff1a;ojb.a1 修改属性&#xff1a;ojb.a2 查询属性&#xff1a;obj.a 删除属性&#xff1a;delete obj.a 其他操作 obj[a]1 Object.assign() //深拷贝&#xff1f;浅拷贝 let{ name} user &#x…

巨控GRM110系列:短距离内的无线通讯模块

标签: #巨控GRM110 #无线通讯 #ROLA技术 #工业自动化 #远程数据采集 在工业自动化和智能制造的领域中&#xff0c;数据的准确传输是实现高效生产的关键。随着技术的不断进步&#xff0c;无线通讯技术已成为破解远距离数据传输难题的利器。今天&#xff0c;我们将聚焦于一款革命…

JAVA的sort用法详解(二维数组排序,List<>排序,lambada表达式,自定义类型排序)

目录 前言&#xff1a; 一维数组降序&#xff1a; 方法1.Comparator接口&#xff1a; 代码实现&#xff1a; 方法2.Collections.reverseOrder()&#xff1a; 代码实现&#xff1a; 二维数组排序&#xff1a; 代码如下&#xff1a; List<>排序&#xff1a; 代码…

遥感卫星影像质量评价指标汇总

1. 主观评价方法 以人为图像的评价者&#xff0c;根据自己的评价尺度和经验对图像质量进行评价。 2. 客观评价方法 1)均方差 2)信噪比 主要用来评价影像经压缩、传输、增强等处理前后的质量变化情况&#xff0c;其本质与均方差类似。 3)方差 反映了图像各个像元灰度相对…

基于js css的瀑布流demo

要实现照片按照瀑布流展示&#xff0c;写个小demo&#xff0c;记录下。 瀑布流实现思路如下&#xff1a; CSS 弹性布局对 3 列按横向排列&#xff0c;对每一列内部按纵向排列 html代码&#xff1a; <div class"content"></div> css代码&#xff1a; …

【学习】企业申请DCMM原来有这么多的好处

DCMM&#xff0c;即数据管理能力成熟度评估模型&#xff08;Data management Capability Maturity Model&#xff09;&#xff0c;是我国在数据管理领域首个正式发布的国家标准。DCMM的核心目的是帮助企业利用先进的数据管理理念和方法&#xff0c;建立和评价自身的数据管理能力…