VUE 配置vue-devtools调试工具及安装方法


Posted in Javascript onSeptember 30, 2018

1. 通过 Git 克隆项目到本地

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

2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令。

先运行 npm install 安装项目依赖

再运行 npm run build 进行编译生成

这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图:

VUE 配置vue-devtools调试工具及安装方法

3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将persistent 参数改为 true,如下图:

VUE 配置vue-devtools调试工具及安装方法

4. 将扩展程序添加到chrome浏览器

a. 打开浏览器扩展程序(也可以直接在地址栏输入 chrome://extensions/ 来打开)

VUE 配置vue-devtools调试工具及安装方法

b. 打开扩展程序后,开启 开发者模式,点击 加载已解压的扩展程序 按钮

VUE 配置vue-devtools调试工具及安装方法

c. 选择 vue-devtools > shells 目录下的 Chrome 文件夹,成功后如下图:

 加载成功后,先启用,然后点击旁边的刷新按钮,浏览器右上角就会出现一个Vue的logo图标

VUE 配置vue-devtools调试工具及安装方法

5. 到此调试工具安装完成。

需要注意的项: vue调试工具请在开发模式下使用,生产环境中不行。即 vue.min.js 文件下,调试工具无效。

下面看下vue调试工具vue-devtools的安装方法

先导

vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。

第一步:

  我们可以先从github上找到vue-devtools的项目,下载到本地。下载vue-devtools链接。

克隆方法:git clone  https://github.com/vuejs/vue-devtools.git

第二步:

  解压下载好的文件,进入到vue-devtools目录,安装项目所需要的依赖包。

安装方法:npm install  或者  cnpm install (注:cnpm命令是国内的镜像,速度会快一些)

第三步:

   编译项目文件。

编译方法:npm run build

第四步:

修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true,访问协议是否包含:

1.http://*/*; 2.https://*/*; 3.file:///*;这三种情况

VUE 配置vue-devtools调试工具及安装方法

第五步:

           添加至浏览器:

添加方法:在chrome浏览器输入地址:“chrome://extensions/”进入扩展程序页面,然后点击“加载已解压的扩展程序...”按钮;选择vue-devtools>shells目录下的Chrome文件夹;还需允许文件地址是否访问。如果看不到“加载已解压的扩展程序...”按钮,先勾选“开发者模式”。如下图:

VUE 配置vue-devtools调试工具及安装方法

第六步:

使用:

    打开我们的vue应用,打开调试,点击vue扩展图标,就可以使用了。如下图:

VUE 配置vue-devtools调试工具及安装方法

注:如果点击vue扩展图标还是提示:Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以检查下你是否使用的是压缩版本的vue.min.js,使用vue.min.js默认为生产环境的,需要改为vue.js.

结束。

总结

以上所述是小编给大家介绍的VUE 配置vue-devtools调试工具及安装方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 #Javascript
You might like
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python轻松实现代码编码格式转换
2015/03/26 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python 回溯法模板详解
2020/02/26 Python
python实现超级玛丽游戏
2020/03/18 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Django中ORM的基本使用教程
2020/12/22 Python
ajax是什么及其工作原理
2012/02/08 面试题
毕业生的自我鉴定
2013/10/29 职场文书
村委会贫困证明范文
2014/09/21 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers