Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。

1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools

2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序。
例子:d:\Program Files\vue-devtools-master>npm run build

3)编译完成后,目录结构如下:

修改shells、chrome目录下的mainifest.json 中的persistant为true:

4)打开谷歌浏览器的更多工具--->扩展程序,并勾选开发者模式

然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器。

5)打开一个已有的vue项目,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式:

发现vue.js is not detected ,可以调整一下webpack.config.js的代码,

最后,重启一下你的vue项目应该就可以使用了。

在浏览器上安装 Vue Devtools工具的更多相关文章

  1. 在google chrome浏览器上安装 Vue Devtools工具

    [转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...

  2. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  3. 浏览器上安装vue devtools

    安装前要检查一下node版本的(node -v),必须将版本提高到>4.4.7.低版本的node在安装devtools时执行npm install 时报错.如何升级node版本,若在window ...

  4. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  5. 在Ubuntu|CentOS上安装Shutter截图工具及快捷键设置

    简介 Shutter前身叫GScrot,它是一款相当棒的截图软件. 通过Shutter,你可以截取包括选定区域.全屏幕.窗口.窗口内的控件甚至网页的图像.通过内置的强大插件机制,你可以在截图后,对图像 ...

  6. 在centos 6.5 在virtual box 上 安装增强版工具

    centos 6.5 在virtual box 上 安装增强版工具: 出现:centos unable to find the source of your current linux kernel ...

  7. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  8. 在Linux上安装Elasticsearch Head工具.md

    在Linux上安装Elasticsearch Head工具 1.修改elasticsearch的参数 编辑elasticsearch的配置文件elasticsearch.yml $ vim /data ...

  9. 在CentOS 6.4上安装Puppet配置管理工具

    在CentOS 6.4上安装Puppet配置管理工具 linux, puppetAdd comments 五052013 上篇说了下在ubuntu12.04上安装puppet,安装的版本为puppet ...

随机推荐

  1. mysql 更新条件为查询出的结果

    UPDATE category c INNER JOIN ( SELECT b.category_id FROM category a, (SELECT * FROM category WHERE d ...

  2. Linux发展史-简简简易版

    "蛋-人-人-人" unix诞生 unix 贝尔实验室 人-谭教授 谭宁邦 minix mini unix 主要用于教学 人-斯托曼 stallman 我要开发出一个系统:自由 开 ...

  3. SQL Server 数据导入Mysql具体教程

    SQLServer2005数据导入Mysql到具体教程(測试) SQL SERVER数据导入MYSQL文件夹   1.Navicat for MySQL 版本号10.0.9 2.创建目标数据库 3.创 ...

  4. 如何利用pip自动生成和安装requirements.txt依赖

    在查看别人的Python项目时,经常会看到一个requirements.txt文件,里面记录了当前程序的所有依赖包及其精确版本号.这个文件有点类似与Rails的Gemfile.其作用是用来在另一台PC ...

  5. BZOJ3110:[ZJOI2013]K大数查询(整体二分)

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c.如果是2 a b c形式,表示询问从第a个位置到第b个位 ...

  6. CSAPP:第三章程序的机器级表示1

    CSAPP:程序的机器级表示1 关键点:数据格式.操作数指示符. 数据格式访问信息操作数指示符举例说明 数据格式   术语字(word)表示16位数据类型,32位数为双字(double words), ...

  7. [HEOI2016/TJOI2016]字符串

    嘟嘟嘟 今天复习一下SAM. lcp固然不好做,干脆直接翻过来变成后缀.首先答案一定满足单调性,所以我们二分lcp的长度\(mid\),然后判断\(s[d \ldots d + mid - 1]\)是 ...

  8. Python:Day17 生成器、time和random模块

    列表生成式: a = [x*2 for x in range(10)] #这是最简单的列表生成式,range换成其它的序列也OK a = [f(x) for x in range(10)] #将里将前 ...

  9. JAVABEAN递归转MAP实现

    之前想找这么一个方法,找到的都不是递归实现的,列表.MAP里面的都没转,就自己折腾了个.——YOYO public class ObjectToMap{ public static Map objec ...

  10. RabbitMQ教程(二) ——linux下安装rabbitmq

    安装过程参考官网: Installing on RPM-based Linux (RHEL, CentOS, Fedora, openSUSE) 首先需要安装erlang,参考:http://fedo ...