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 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python实现动态创建类的方法分析
2019/06/25 Python
解决Python中回文数和质数的问题
2019/11/24 Python
Python文件操作方法详解
2020/02/09 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
研发工程师岗位职责
2014/04/28 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
违章停车检讨书
2014/10/21 职场文书
贷款担保书
2015/01/20 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Python快速实现一键抠图功能的全过程
2021/06/29 Python
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技