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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
js点击选择文本的方法
Feb 09 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
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
windows xp下安装pear
2006/12/02 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php MessagePack介绍
2013/10/06 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
document.all与WEB标准
2020/05/13 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue filters的使用详解
2018/06/11 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python字符串格式化方式解析
2019/10/19 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
python音频处理的示例详解
2020/12/23 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
应届生高等护理求职信
2013/10/12 职场文书
自荐书4要点
2014/01/25 职场文书
工作决心书
2014/03/11 职场文书
教师师德演讲稿
2014/05/06 职场文书
法人授权委托书样本
2014/09/19 职场文书
2019财务转正述职报告
2019/06/27 职场文书
如何在C++中调用Python
2021/05/21 Python
vue的项目如何打包上线
2022/04/13 Vue.js
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android