Vue调试神器vue-devtools安装方法
时间:2019-04-11
本文章向大家介绍Vue调试神器vue-devtools安装方法,主要包括Vue调试神器vue-devtools安装方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
什么是vue-devtools?
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
安装方式
1.chrome商店直接安装:
vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。
2.手动安装:
第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步:安装项目所需要的npm包
npm install //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install
第三步:编译项目文件
npm run build
第四步:添加至chrome游览器
游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序…”按钮,选择vue-devtools>shells下的chrome文件夹。
/**
*如果看不见“加载已解压的扩展程序…”按钮,则需要勾选“开发者模式”。
*/
到此添加完成,效果图如下:
结语:vue-devtools如何使用
当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。好了,接下来可以愉快的调BUG了~!~
- 使用Buck构建Android工程
- android 实现淘宝收益图的折线
- React Native入门(三)组件的Props(属性)和State(状态)
- Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)【Dalston版】
- PNG图片压缩对比分析
- 关于M4A文件的随机访问
- (whh仅供自己参考)进行ip网络请求的步骤
- HTML中的javascript交互
- Spring Cloud构建微服务架构:分布式配置中心【Dalston版】
- [Android] Toast问题深度剖析(二)
- [Android] Toast问题深度剖析(一)
- android离线缓存技术
- 浅谈ViewModel
- Android深入理解JNI(二)类型转换、方法签名和JNIEnv
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker 容器跨主机多网段通信解决方案
- Docker 容器实现数据持久化
- mongodb----复制
- CentOS磁盘挂载
- Mono for Android 实现高效的导航
- MyBatis版本升级导致OffsetDateTime入参解析异常问题复盘
- elasticSearch学习(二)
- 146. LRU缓存机制 Krains 2020-08-05 12:50:28 链表
- 337. 打家劫舍 III Krains 2020-08-05 10:18:45 动态规划
- 58道Vue常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度
- 记一次Linux计划任务cron无结果的排查过程
- 一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景用例
- 5 个 JS 数组技巧可提高你的开发技能
- 一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?
- 关于MySQL LOAD DATA特性的利用与思考