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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 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
服务器web工具 php环境下
2010/12/29 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php读取3389的脚本
2014/05/06 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
深入理解python对json的操作总结
2017/01/05 Python
python学习入门细节知识点
2018/03/29 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
python实现简单五子棋游戏
2019/06/18 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python FTP编程基础入门
2021/02/27 Python
如何用PHP实现邮件发送
2012/12/26 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
酒店led欢迎词
2014/01/09 职场文书
项目总经理岗位职责
2014/02/14 职场文书
银行职员自我鉴定
2014/04/20 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
学术会议邀请函
2015/01/30 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
react中的DOM操作实现
2021/06/30 Javascript