文档章节

Vue调试神器vue-devtools安装

kisshua
 kisshua
发布于 2018/07/18 23:19
字数 550
阅读 137
收藏 19

前言

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

chrome商店直接安装

vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。

手动安装

第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools

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

第二步:安装项目所需要的npm包

npm install   //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install

第三步:编译项目文件

npm run build

第四步:添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序...”按钮,选择vue-devtools>shells下的chrome文件夹。

/**
*如果看不见“加载已解压的扩展程序...”按钮,则需要勾选“开发者模式”。
*/

到此添加完成,效果图如下:

结语:vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。

附录

鉴于评论中很多小伙伴们有很多同学编译不成功,我这里把编译过的文件上传了百度云,后续步骤依旧,并且还附上了一个.crx文件,在chrome拓展程序页面上把文件拖进去即可安装。若百度云失效可文章下留言,我看到后会重新生成链接。

 链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg  密码:1hsv

本文转载自:https://segmentfault.com/a/1190000009682735

共有 人打赏支持
kisshua
粉丝 31
博文 174
码字总数 35260
作品 0
武汉
后端工程师
私信 提问
你或许不知道Vue的这些小技巧

前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候...

OBKoro1
2018/10/29
0
0
vue调试工具vue-devtools安装及使用

1.安装 (1)到github下载 (2)在vue-devtools目录下安装依赖包 (3)修改manifest.json文件,把"persistent":false改成true (4)编译代码 (5)扩展Chrome插件 Chrome浏览器 >右上角三个点 > 更多工具......

林夏夕
2018/07/12
0
0
Vue开发与调试工具--调试工具篇

主要讲三个东西: Vue.js devtools开发工具的使用 使用debugger和sourcemap调试Vue组件 vscode中调试Vue组件 Vue.js devtools开发工具的使用 在Chrome或Firefox浏览器的扩展插件仓库里搜vue...

dragon_tech
2018/11/30
0
0
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
2018/04/05
0
0
Vue调试神器Vue.js devtools

前言: Vue.js devtools是一个高效的vue项目可视化检查工具,其主要功能就是可以快速查看页面结构、组件中的data变量、computed计算属性、props父组件传过来的值等等 Chrome上的使用方法: 科学...

JamesView
01/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-13(Mybatis基本概念和简单的例子)

在mybatis初次学习Mybatis的时候,遇到了很多问题,虽然阿里云的视频有教学,但是视频教学所使用的软件和我自己使用的软件不用,我自己用的数据库是oracle数据库,开发环境是idea。而且视频中...

白话
今天
3
0
Java基础:String、StringBuffer和StringBuilder的区别

1 String String:字符串常量,字符串长度不可变。Java中String是immutable(不可变)的。 String类的包含如下定义: /** The value is used for character storage. */private final cha...

watermelon11
今天
2
0
mogodb服务

部署MongoDB 官网: https://www.mongodb.com/download-center/community 创建mongo数据目录 mkdir /data/mongodb 二进制部署 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x8......

以谁为师
昨天
5
0
大神教你Debian GNU/Linux 9.7 “Stretch” Live和安装镜像开放下载

Debian项目团队于昨天发布了Debian GNU/Linux 9 "Stretch" 的第7个维护版本更新,重点修复了APT软件管理器中存在的安全漏洞。在敦促每位用户尽快升级系统的同时,Debian团队还发布了Debian ...

linux-tao
昨天
4
0
PHP 相关配置

1. php-fpm的pool 编辑php-fpm配置文件php-fpm.con vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加以下内容 include = etc/php-fpm.d/*.conf # 相当与Nginx的虚拟主机文件 “vho......

Yue_Chen
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部