Vue DevTools调试工具的使用


Posted in Javascript onDecember 05, 2017

因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了。

Vue DevTools调试工具的使用

安装:

1.到github下载:

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目录下安装依赖包

cd vue-devtools

cnpm install

修正Vue DevTools

好了,开始正题,下面来说一下修正的方法。

先从官网把Vue DevTools下载下来(https: //github.com/vuejs/vue-devtools)。

Vue DevTools调试工具的使用

关键步骤一.修改persistent

找到文件vue-devtools/shells/chrome/manifest.json,修改persistenttrue

Vue DevTools调试工具的使用

保存后,编译一下:

Vue DevTools调试工具的使用

关键步骤二.勾选允许访问文件网址

上一步已经把Vue DevTools写好了,接下来是安装这个扩展。

打开Chrome,在地址栏输入chrome://extensions/,直接进入Chrome的扩展。

勾选最上方的开发者模式,再点击“加载已解压的扩展程序…”,路径为:vue-devtools-master/shells/chrome

Vue DevTools调试工具的使用

勾选允许访问文件网址

Vue DevTools调试工具的使用关键步骤三.加入Vue文件中加入Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({
 el: '#app',
 data: {
  a: 123,
 }
});

搞定!

效果

Vue DevTools调试工具的使用

下载已修正版的Vue DevTools下载:vueDevTools(可监测修正版).zip

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
js 调用百度分享功能
Feb 27 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 #Javascript
webpack学习教程之前端性能优化总结
Dec 05 #Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 #Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 #Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 #Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 #Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 #Javascript
You might like
php生成随机密码的三种方法小结
2010/09/04 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python的mysqldb安装步骤详解
2017/08/14 Python
python列表的增删改查实例代码
2018/01/30 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python使用knn实现特征向量分类
2018/12/26 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python调用私有属性的方法总结
2020/07/24 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
货代行业个人求职简历的自我评价
2013/10/22 职场文书
给老师的一封建议书
2014/03/13 职场文书
村干部培训方案
2014/05/02 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
班级活动总结格式
2014/08/30 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记