方法一: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. 用jquery实现楼层滚动对应导航高亮

    html 结构排版: // 定位到页面左侧或者右侧 <div class="nav">         <ul id="menu-list"& ...

  2. nbuoj2786 玻璃球

    题目:http://www.nbuoj.com/v8.83/Problems/Problem.php?pid=2786 用2个玻璃球找到从一100层的大楼的某一层落下刚好会摔碎,如何制定最优策略? 别 ...

  3. 源码编译安装 ganesha

    源码编译安装 ganesha 简介 系统环境:CentOS 7.5 ceph:luminous nfs-ganesha:v2.6 stable 安装步骤 安装依赖 首先需要安装编译会用到的公共库 1 ...

  4. 浅谈C++虚函数机制

    0.前言 在后端面试中语言特性的掌握直接决定面试成败,C++语言一直在增加很多新特性来提高使用者的便利性,但是每种特性都有复杂的背后实现,充分理解实现原理和设计原因,才能更好地掌握这种新特性. 只要出 ...

  5. DENEBOLA (See3CAM_CX3RDK) - CX3 Reference Design

    Denebola (See3CAM_CX3RDK) is a USB3.0 USB video class (UVC) reference design kit (RDK) developed by ...

  6. hdu 1667 The Rotation Game ( IDA* )

    题目大意: 给你一个“井”子状的board,对称的由24个方块组成,每个方块上有123三个数字中的一个.给你初始状态,共有八种变换方式,求字典序最小的最短的的变换路径使得,board中间的八个方块上数 ...

  7. cookie与session django中间件

    目录 一.什么是cookie 二.django中操作cookie 2.1 如何操作cookie 2.2 操作cookie 三.什么是session 四.django中操作session 4.1 创建c ...

  8. Linux防火墙的相关资料

    1.查看防火墙状态 [root@localhost ~]# service iptables status 2.编辑/etc/sysconfig/iptables文件.我们实例中要打开8080端口和9 ...

  9. go 1.13编译遇到xxx/go.mod malformed record data 问题

    背景: 公司在做自己的发布平台,需要自动化编译go 工程,大部分开发使用的都是go 1.12 版本 由于go mod的机制,有很多包需要代理才能进行下载,而自动化编译频繁的进行代理切换就很麻烦. 所以 ...

  10. 基于C#WPF框架——动画

    WPF提供了一个更高级的模型,通过该模型可以只关注动画的定义,而不必考虑它们的渲染方式.这个模型基于依赖项属性基础架构.本质上,WPF动画只不过是在一段时间间隔内修染方式.这个模型基于依赖项属性基础架 ...