我和谷歌共成长——前端必备插件Vue.js devtools

简介: 我和谷歌共成长——前端必备插件Vue.js devtools

@TOC


前言

对于我们开发者而言,Google插件非常便捷与易于生活,主要原因还是Google插件的多样性和全面性。

对于前端开发者来说,大部分都是使用vue来开发
那么有没有一款插件能让vue的开发效率变高
下面,我来介绍一下前端必备插件Vue.js devtools

一、开发需求

在开发中,我们常常需要观察数据的变化,
特别是在vue中,一旦数据量变多,我们常常容易混淆
如果我们才有以前的老方法,在控制台中console.log(),那么我们的开发效率就会变得极低
因此我们需要使用Vue.js devtools来帮助我们监听数据的变化

在这里插入图片描述
例如在这个页面中,我们那么多项数据,如果我们使用console.log()一个个输出查看,我们需要看到猴年马月,
在这里插入图片描述
在Vue.js devtools中,我们可以清楚的看出数据的变化

安装

应用商店安装

那么好用的插件,我们要怎么安装呢
在这里插入图片描述
最简单的就是直接在应用商店里面直接安装
在这里插入图片描述
安装完成
在这里插入图片描述

F12打开调试工具
我们可以看到有个vue的标识
点击vue,就可以看见数据了
在这里插入图片描述

在github下载

官网下载:github地址
在这里插入图片描述
在这里插入图片描述
下载完后解压
在这里插入图片描述
安装好相关依赖,运行npm run build
在这里插入图片描述
进入扩展程序,打开开发者模式
然后将刚刚编译后的shells下的chrome文件夹拖拽到浏览器中。
在这里插入图片描述

总结

Vue.js devtools有助于我们开发,可以极大的提升我们的开发速率
在开发过程中,我已经深深地喜欢上这个插件,为了提供了许多方便
感谢谷歌提供的插件,让我们这些开发者能在工作中提升开发效率

相关文章
|
2天前
|
存储 前端开发 数据库
前端项目一键换肤vue+element(ColorPicker)
本文介绍了如何在前端项目中实现一键换肤功能,通过使用CSS变量和Element UI的颜色选择器组件(ColorPicker),并结合Vuex进行状态管理和持久化,实现主题颜色的动态切换。
11 3
前端项目一键换肤vue+element(ColorPicker)
|
2天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
13 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
13 2
前端JS读取文件内容并展示到页面上
|
2天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
13 4
|
1天前
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
2天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
10 2
|
1天前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
2天前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
10 1
|
1天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
1天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。