方法一:chrome直接访问下面地址下载安装:(需要翻墙)

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

方法二:手动安装chrome扩展程序

1、获取vue-devtools项目,进入vue官网>生态系统>工具>devtools ,把vue-devtools项目clone到本地,命令行执行内容如下:

第一步:等待clone完成
git clone https://github.com/vuejs/vue-devtools.git 第二步:切换到devtools项目中,并安装依赖,可能有点慢,稍等。。。
cd .\vue-devtools\
npm install 第三部:打包
npm run build

2、添加chrome扩展程序,如下图:

完成!

当然有可能出现一点小状况,在vue项目(开发模式下)中 vue-devtools扩展程序的图标仍是灰色的(点击提示:Vue.js not detected),或者是亮的,但是点击后,开发者工具中没有vue-devtools入口的 ,  可以尝试重启服务或者重新打开开发者工具。

vue应用调试工具 vue-devtools安装的更多相关文章

  1. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  2. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  3. Vue中devtools安装使用

    vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...

  4. vue开发调试工具vue-devtools安装

    vue开发调试工具别人总结的非常好,所以直接把链接拿过来了,就当做个笔记了,也希望能帮到有需要的人,感谢“沉着前进”,来源(https://www.cnblogs.com/fighxp/p/78150 ...

  5. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  6. vue-devtools是vue浏览器调试工具

    开vue官网在vue-生态系统-工具可以看到vue-devtools这个工具: vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我 ...

  7. 【vue.js】windows下安装vue.js

    windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...

  8. vue学习笔记 vue安装

    一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...

  9. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  10. Win环境下安装vue及运行vue开发的前端项目

    vue安装及配置 首先下载node.js要求版本在8.9以上        官网:https://nodejs.org/zh-cn/ 下载完可检查在windows任务命令行里输入node -v 使用淘 ...

随机推荐

  1. BZOJ3110[Zjoi2013]K大数查询(树状数组+整体二分)

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

  2. CoderForces999F-Cards and Joy

    F. Cards and Joy time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  3. 【JS】374- 重学 this 关键字

    为什么要学习this关键字 1. 面试会问啊!总有一些面试官喜欢问你一段不可能这么写的代码.看一道经典且古老的面试题(学完本文后,文末会有一道更复杂的面试题等着你哦!) 代码如下: let a = 5 ...

  4. JS基础-原型链和继承

    创建对象的方法 字面量创建 构造函数创建 Object.create() var o1 = {name: 'value'}; var o2 = new Object({name: 'value'}); ...

  5. ceph安装

    使用ceph-deploy部署部署版本ceph-luminous   一,下载安装包,制作yum源,yum将挂载到192.168.100.100 (1)下载安装包 mkdir ceph-luminou ...

  6. Elasticsearch系列---搜索分页和deep paging问题

    概要 本篇从介绍搜索分页为起点,简单阐述分页式数据搜索与原有集中式数据搜索思维方式的差异,就分页问题对deep paging问题的现象进行分析,最后介绍分页式系统top N的案例. 搜索分页语法 El ...

  7. 关于HPS和FPGA之间的桥接学习笔记一

    为了实现FPGA和HPS之间的存储器共享和数据传输,Altera SoC FPGA提供了两种方式用于FPGA和HPS通信.分别是FPGA to SDRAM和AXI bridge. FPGA to SD ...

  8. PAT1057 Stack(树状数组+倍增)

    目录 题目大意 题目分析 题目大意 要求维护一个栈,提供压栈.弹栈以及求栈内中位数的操作(当栈内元素\(n\)为偶数时,只是求第\(n/2\)个元素而非中间两数的平均值).最多操作100000次,压栈 ...

  9. Django基础day01

    后端(******) 软件开发结构c/s http协议的由来 sql语句的由来 统一接口统一规范 HTTP协议 1.四大特性 1.基于TCP/IP作用于应用层之上的协议 2.基于请求响应 3.无状态 ...

  10. linux之文件的属性

    1.我们使用ls -al查看目录下的文件 2.先看第一个权限 -rw-r--r-- 1 hui hui 3806 Oct 3 17:48 .bashrc 对于.bashrc,其权限是-rw-r--r- ...