开vue官网在vue-生态系统-工具可以看到vue-devtools这个工具：

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

vuet调试工具两种安装方式

chrome商店直接安装

在谷歌chrome商店直接下载安装，非常简单。不过要注意的一点就是，需要翻墙才能下载。也可以下载谷歌访问助手，可以使用chrome扩展程序。

手动安装

直接找到vue生态系统-工具-vue-devtools，登录到github地址，

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

安装项目所需要的npm包

npm install

编译项目文件

cd vue-devtools
npm run build

修改manifest.json文件

把"persistent":false改成true

添加至chrome浏览器

浏览器输入地址chrome://extensions/打开扩展程序,点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入

打开可以看到安装成功了。

使用

vue-devtools是vue浏览器调试工具的更多相关文章

  1. vue devtools无法使用

    vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...

  2. vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

    vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...

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

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

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

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

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

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

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

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

  7. 使用vue Devtools

    第一步: 在谷歌应用商店中查找 vue Devtools 并安装.安装之后,即使我们打开了vue项目发现vue标识是灰色的,说明并没有成功启动vue. 第二步: 默认安装的情况下,找到C:\Users ...

  8. 【22】Vue 之 Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  9. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  10. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

随机推荐

  1. 手动安装Firefox Linux

    (2015-06-05 17:22:19)[编辑][删除] 转载▼ 标签: 股票 Firefox 下载文件以.tar和.bz2格式保存,必须从这些压缩包中提取文件.不想删除当前安装的 Firefox, ...

  2. STM32F104VG (一)中断与外部中断

    一.基础知识 1.ARM的中断优先级分硬件优先级和软件优先级两种 当中软件优先级又由抢占优先级和响应优先级组成 2.中断的优先级採用编号小优先的原则. 3.普通情况: 1).假设设定了软件优先级.先看 ...

  3. django 名词解释

    1) 什么是slug http://stackoverflow.com/questions/427102/what-is-a-slug-in-django 如上链接红色部分就是slug,它就是链接的最 ...

  4. Django打造大型企业官网（五）

    4.6.切换轮播图的箭头样式以及显示和隐藏 templates/news/index.html <span class="arrow left-arrow">‹< ...

  5. openstack （4）---部署Glance镜像服务，Nova计算服务

    一.Glance Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚拟机镜像的metadata及获取 ...

  6. 网卡bood

    一.网卡bood (1)网卡bond(绑定),也称作网卡捆绑.就是将两个或者更多的物理网卡绑定成一个虚拟网卡.网卡是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在应用部署 ...

  7. Windows 环境下运用Python制作网络爬虫

    import webbrowser as web import time import os i = 0 MAXNUM = 1 while i <= MAXNUM: web.open_new_t ...

  8. （五）Java 对象和类

    Java 对象和类 Java作为一种面向对象语言.支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 消息解析 本节我们重点研究对象和类的概念. 对象:对象是类的一个实例,有状态和行为. ...

  9. shell如何查看单个或多个文件的行数或总行数

    shell如何查看单个或多个文件的行数或总行数_百度经验 https://jingyan.baidu.com/article/cbf0e500b8470f2eab28937d.html 单个文件   ...

  10. 千万数据条 用户特征数据 写入mysql

    from mysql_tool import * import copy s = ''' INSERT INTO `qqzone`.`myu` (`id`, `uid`, `age`, `gender ...