开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. JSP中操作Java Beans

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/beans.html: JavaBean是在编写Java时专门创建的Java类,根据JavaBean AP ...

  2. 解决confluence的乱码问题

    使用confluence时发现一些含有中文的页面中,中文都变成了问号. 继续搜索解决方案,发现时数据库中数据的格式不对, 在mysql中输入以下命令:   mysql> show variabl ...

  3. Web端口复用正向后门研究实现与防御

    0×01背景 现在的很多远控/后门因为目前主流防火墙规则的限制,基本上都采用TCP/UDP反弹回连的通讯形式:但是在较高安全环境下,尤其负责web相关业务的环境,因为安防设备(防火墙,IDS,IPS等 ...

  4. 手把手教你开发Chrome扩展二:为html添加行为

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 上一节我们 ...

  5. VMWare9下基于Ubuntu12.10搭建Hadoop-1.2.1集群—整合Zookeeper和Hbase

    VMWare9下基于Ubuntu12.10搭建Hadoop-1.2.1集群-整合Zookeeper和Hbase 这篇是接着上一篇hadoop集群搭建进行的.在hadoop-1.2.1基础之上安装zoo ...

  6. js算法:分治法-循环赛事日程表

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  7. .net mvc4 + ajaxfileupload.js 解决IE浏览器中弹出下载对话框问题

    摘要:每一个人遇到的问题都不一样,在网上找了一大圈都没有解决到我的问题!由于我的环境如标题所看到的.攻克了这个问题. 主要问题:在于响应头的设置 Controller: [HttpPost] publ ...

  8. struts2学习笔记(8)-------struts2的ajax支持

    struts2支持一种stream类型的Result,这样的类型的Result能够直接向client浏览器响应二进制,文本等. 我们能够再action里面生成文本响应,然后在client页面动态载入该 ...

  9. mac终端配置Android ADB命令

    不得不说mac是一款开发利器,不仅可以开发ios,而且对于Android开发也是不错的选择,下面我就对mac配置adb命令,进行简要的说明.下面我将一下mac环境下的配置步骤:1.在自己的目录(hom ...

  10. manacher hihoCoder1032 最长回文子串

    居然能够做到O(n)的复杂度求最长回文.,也是给跪了. 以下这个人把manacher讲的很好,,能够看看 http://blog.csdn.net/xingyeyongheng/article/det ...