vue中devTools插件安装教程

news2024/11/18 1:23:54

vue-devTools

为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试
vue-devTools插件:点击下载
插件安装教程:https://chrome.zzzmh.cn/help?token=setup

插件安装步骤

  • 1.首先进入浏览器设置,点击 扩展程序
    在这里插入图片描述
  • 2.开启 开发者模式,点击 加载已解压的扩展程序 或者 直接拖拽已解压的扩展程序
    注:已解压的扩展程序就是上面下载的,点击下载
    在这里插入图片描述
  • 3.安装成功以后就可以看到:
    在这里插入图片描述
    点击红框处开启
  • 4.通过 npm run serve 启动应用以后,即可看到浏览器右上角的 Vue 插件图片,图 红框一 处,表示 Vue.js devtools 已启动,点击图 红框二 的 vue 一项
  • 在这里插入图片描述

以上就是vue中如何安装devTools插件的方法,有不懂得可以在评论区里问我,后续也会发布一些新的文章,敬请关注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog

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

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

相关文章

js深拷贝方法

一、ES6中扩展运算符 ES6中的扩展运算符(如果只是一层数组或者对象就是深拷贝,多层就是浅拷贝) var obj {name : "海绵宝宝",age: 18,sayHello (){console.log("比奇堡早上好");}}var newObj {...obj}console.log(&q…

Vue中的跨域解决方案

前言 跨域是因为浏览器存在对不同源页面数据接收的限制。这种限制就是浏览器的同源策略。 同源策略是浏览器的安全机制,跨域的原理就是通过各种方式避开浏览器的安全机制 使用 在项目开发时,对跨域的概念仅限于了解,所以没有注重过程&#xf…

Vue全新一代状态管理库 Pinia【一篇通】

文章目录前言1. Pinia 是什么?1.1 为什么取名叫 Pinia?1.2. 为什么要使用 Pinia ?2. 安装 Pinia2.1.创建 Store2.1.1. Option 类型 Store2.1.2 Setup 函数类型 Store2.1.3 模板中使用3. State 的使用事项(Option Store )3.1 读取 State3.2 …

命令行 cnpm install 报错: Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7

是不是在 进行 cnpm install 报了同款错误呢! G:\Git\owl-read-admin>cnpm install Install fail! Error: Unsupported URL Type: npm:vue-loader^15.9.7 Error: Unsupported URL Type: npm:vue-loader^15.9.7at parseUrl (C:\Users\Lenovo\AppData\Roaming\np…

@DateTimeFormat注解

DateTimeFormat注解 前言 前言在使用DateTimeFormat进行格式化注解时,总是不能匹配前端传入的。格式总是报错 我这里使用的是pattern进行解析的的但是前端是给我传入的ISO类型的导致不能匹配所以总是报错。后来我们进行查看源码得到了答案。 源码解析 看下源码解析…

vue实现在线预览office文件

最近在做电子档案,后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载。 按道理说,做文件的在线预览,买个第三方服务什么的&…

前端工程师都在用的 VSCode 常用插件

文章目录前言一、VSCode常用的插件1.Chinese (Simplified) (必备)2.Auto Rename Tag3.One Dark Pro 颜色主题4.格式化代码(vscode系统自带)5.open in browser 浏览器预览页面6. Live Server 实时预览(推荐)7. vscode-icons 设置文…

Vue用户管理(增删改查)功能详情

1、最终实现效果&#xff1a; Users.vue: <template><div><!--面包屑导航区域--><el-breadcrumb separator-class"el-icon-arrow-right"><el-breadcrumb-item :to"{ path: /home }">首页</el-breadcrumb-item><el…

Ant Design Vue文件上传详解

ant design 基于vue的文件上传 (XSLX文件篇) Upload 上传 template <a-uploadname"multipartFile":multiple"false":action"action"methods"post"change"uploadFile":file-list"fileList":disabled"di…

Emmet语法总结

1 Emmet简介 Emmet是一个Web开发工具&#xff0c;用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外&#xff0c;截至2022年&#xff0c;主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具&#xff0c;无需手动…

Element-Plus el-col、el-row快速布局

文章目录前言一、el-colspanpush & pull响应式offset二、el-rowgutterjustifyalign总结前言 拖拉了一晚, 总结了一些Layout布局工具的使用方法. 一、el-col 本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸). el-col是el-row的子元素. 在el-row添加 style&qu…

学会在Vue项目中插入高德地图JS API与地图的相关设置,看这一篇就够了~(保姆级精简教学)

高德地图API官网&#xff1a;高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的&#xff0c;所以针对地图 JavaScript API 结合 Vue 展开介绍。 目录 一、案例效果 二、开发准备 1. 注册高德开放平台账号 2. 创建应用添加 key 值 三、项目中使用地图组件…

Echart地图组件的使用

1、基本应用&#xff08;中国地图世界地图&#xff09; ​ echarts中想要使用地图首先需要准备地图对应的js文件&#xff0c;js文件可以到github上克隆下来&#xff0c;地址为&#xff1a; https://github.com/Luna829/incubator-echarts &#xff0c;地图的js文件存放在 map/…

vue2实现可拖拽甘特图(结合element-ui的gantt图)

一、前言 接到公司需求&#xff0c;要做一个可拖拽的甘特图来实现排期需求&#xff0c;官方的插件要付费还没有中文的官方文档可以看&#xff0c;就去找了各种开源的demo来看&#xff0c;功能上都不是很齐全&#xff0c;于是总结了很多demo&#xff0c;合在一起组成了一版较为完…

【前端工程化】配置package.json中scripts命令脚本,新手必学

每日鸡汤&#xff1a;你总要努力追上那个曾经被赋予众望的自己吧 目录 前言 一、运行npm run 命令之后会干啥&#xff1f; 1. scripts里面写啥 2. node_modules/.bin 二进制可执行文件 二、运行插件配置 1. 运行某个npm包的命令 2. 多个命令一起运行 总结 前言 配置pac…

JavaScript工具库——Lodash.js介绍安装及使用

前言&#xff1a; 本文主要介绍-JavaScript工具库——Lodash.js介绍安装及使用&#xff01; 作为初入职场、或者对 JavaScript 很多原理掌握的还不是那么透彻的时候&#xff0c;Lodash 这个工具库绝对是一把“杀手锏”&#xff0c;让我们一起来看看这把 “杀手锏” 的厉害之处。…

【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录&#xff1a;【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化&#xff0c;从以下几个方…

学前端没这些工具怎么行

目录 前端工具 1.编译软件 2.网上编辑软件 3.参考文档 4.扩展 5.学习软件 6.优秀的教育机构 7.转化工具 8.记录笔记程序 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#x1f381;系列专栏&#xff1a;…

前端vue3项目中百度地图的使用api及实例

目录 一、使用百度地图的准备工作&#xff1f; 二、百度地图的简单Demo 三、百度地图的常用api有哪些&#xff1f; 1、百度地图的类型&#xff1f; 2、百度地图控件 一、使用百度地图的准备工作&#xff1f; 1、先注册百度账号 --> 申请成为百度开发者 --> 获取服务…

React--》状态管理工具—Mobx的讲解与使用

目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具&#xff0c;mobx和react的关系相当于vuex和vue之间的关系&#xff0…