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 cdn使用介绍
May 08 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Python中的字典遍历备忘
2015/01/17 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python实现控制COM口的示例
2019/07/03 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
《乌塔》教学反思
2014/02/17 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
医学检验专业自荐信
2014/09/18 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL