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 相关文章推荐
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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判断变量是否为0的方法
2014/02/08 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP中header用法小结
2016/05/23 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python实现文本界面网络聊天室
2018/12/12 Python
Python 编程速成(推荐)
2019/04/15 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python requests模块session代码实例
2020/04/14 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
自我鉴定四大框架
2014/01/17 职场文书
代领报检证委托书范本
2014/10/11 职场文书
销售业务员岗位职责
2015/02/13 职场文书
写给导师的自荐信
2015/03/06 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python