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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
JavaScript数组常用方法
Mar 02 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
浅谈JS的原型和继承
May 08 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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中error与exception的区别及应用
2014/07/28 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
JavaScript类库D
2010/10/24 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python File(文件) 方法整理
2019/02/18 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python 实现return返回多个值
2019/11/19 Python
python MD5加密的示例
2020/10/19 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python基于openpyxl生成excel文件
2020/12/23 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python函数式编程中itertools模块详解
2021/09/15 Python