vue-devtools下载与使用

使用vue-cli的同学肯定知道有一个Chrome调试工具——vue-devtool。但是在国内环境很难直接在Chrome商店下载得到,今天提供一个4.1.5版本的下载地址。链接:
网盘地址
提取码:ty1m
如果地址过期了,可以到csdn下载:csdn地址

1.安装

我们打开chrome的扩展程序,讲刚下载的文件拖进去,就可以安装了。


安装

2.更改一些配置

首先打开chrome的开发者模式,然后允许vue-devtool在隐身模式使用,和允许访问网址。

修改

修改

改好之后,还需要修改插件的一个配置,找到插件的安装目录,在chrome浏览器输入:chrome:version
可以看到插件的目录,打开之后

打开安装目录:
安装目录

注意,插件所在的那段长的文件夹名称可以在打开开发模式之后找得到。
修改

终于找到安装目录之后,我们可以看到有个manifest.json文件。打开我们修改几个地方。
修改

最后一步,我们把应用的vue.min.js改为vue.js就可以使用了。
最后看一下插件的位置。
插件

3使用

使用vue-devtool可以查看vue组件里面的data里面的变量,methods里面的函数,和一些全局对象比如说:$refs,$route,可以查看vuex里面的变量及变化监听。

查看

可以看到,我们通过搜索priceProcess组件名称,找到了该组件,点击组件之后,看到了data,computed里面的变量,并且得到了一个$vm0的vue对象,图中我们也看到了vuex和event。我们试着查看和改变一些变量。

操作

可以看到,我们通过$vm0全局变量,成功操作了该组件定义的loading变量。通过该工具,可以很方便的调试我们的vue程序。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • F7+Vue+WebPack移动端单页应用脚手架 1 简介 F7-VUE-WEBPACK-SCAFFOLD,是一个...
    bluexiii阅读 5,870评论 0 8
  • 时间是拖延者面临的最大挑战之一; 他们或是被对时间的恐慌占据或是在一个小时, 一分钟一分钟地默数时间, 或者或是假...
    zhoujia阅读 604评论 0 0
  • 第一中学高二年级 韩帅 质量是一家企业的生命线,同样也是一所学校的生命线。没有了质...
    韩帅_6e4a阅读 953评论 0 2
  • 4月20日日记复盘第54天,复盘第145天 A区,关键词:自信力、亲子、管理能力提升、减肥美丽、管理公平性,每周两...
    敢比会重要阅读 171评论 0 0
  • 如果回忆能让你快乐,请留我在回忆,时间会告诉你,我有多么爱你,... 又到了冬天,天空雾朦朦的,总是阴霾滿天,而这...
    咖啡里的雲阅读 225评论 0 0