vue调试工具vue-devtools安装及使用方法


Posted in Javascript onNovember 07, 2018

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

安装:

1.到github下载:

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

2.在vue-devtools目录下安装依赖包

cd vue-devtools
cnpm install

3.修改manifest.json文件

vue调试工具vue-devtools安装及使用方法

把"persistent":false改成true

vue调试工具vue-devtools安装及使用方法

 4.编译代码

npm run build

5.扩展Chrome插件

Chrome浏览器 >  更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

vue调试工具vue-devtools安装及使用方法

6. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

vue调试工具vue-devtools安装及使用方法

 怎么样, 是不是感觉工作效率提高了呢

温情提示:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

下面在单独给大家介绍下vue调试神器devtools的 安装

vue  devtools 安装

  1. 下载完成后,在文件夹下 npm install
  2. 然后npm run build
  3. 完成之后,打开…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的manifest.json修改"persistent": false —> "persistent": true
  4. 完成之后,打开…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的webpack.config.js修改为 process.env.NODE_ENV !== 'development'
  5. 在chrome://extensions/中打开开发者模式,将vue-devtools-dev\vue-devtools-dev\shells\chrome 文件夹拉入
  6. 完成后的样子

vue调试工具vue-devtools安装及使用方法

总结

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

Javascript 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
vue+webpack中配置ESLint
Nov 07 #Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 #Javascript
React 源码中的依赖注入方法
Nov 07 #Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 #Javascript
详解react native页面间传递数据的几种方式
Nov 07 #Javascript
微信小程序使用npm支持踩坑
Nov 07 #Javascript
Angular Material Icon使用详解
Nov 07 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php blowfish加密解密算法
2016/07/02 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
python生成器generator用法实例分析
2015/06/04 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
交通安全温馨提示语
2015/07/14 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
MySQL新手入门进阶语句汇总
2022/09/23 MySQL