开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. linux系统编程：线程同步-信号量(semaphore)

    线程同步-信号量(semaphore) 生产者与消费者问题再思考 在实际生活中,仅仅要有商品.消费者就能够消费,这没问题. 但生产者的生产并非无限的.比如,仓库是有限的,原材料是有限的,生产指标受消费 ...

  2. 从零開始学android<Bitmap图形组件.四十七.>

    android.graphics.Bitmap(位图)是Android手机中专门提供的用于操作图片资源的操作类,使用此类能够直接从资源文件之中进行图片资源的读取.而且对这些图片进行一些简单的改动. 经 ...

  3. Mac SavePanel 保存文件的GUI代码

    // Move the recorded temporary file to a user-specified location (视频文件另存储过程,依据用户选择的路径和文件保存名) NSSaveP ...

  4. iOS开发——高级篇——线程同步、线程依赖、线程组

    前言 对于iOS开发中的网络请求模块,AFNet的使用应该是最熟悉不过了,但你是否把握了网络请求正确的完成时机?本篇文章涉及线程同步.线程依赖.线程组等专用名词的含义,若对上述名词认识模糊,可先进行查 ...

  5. H264 层次构成[2]

    H264层次构成 H264标准是由JVT(Joint Video Team,视频联合工作组)组织提出的新一代数字视频编码标准.JVT于2001年12月在泰国Pattaya成立.它由ITU-T的VCEG ...

  6. su 认证失败

    jiqing@ThinkPad:~$ su 密码: su:认证失败 jiqing@ThinkPad:~$ sudo passwd root [sudo] password for jiqing: 输入 ...

  7. 对于系统盘升级windows10怕空间不够，还是打算继续卸载一些软件

    本来是打算从其他盘压缩,然后扩展,可是怕把磁盘给弄坏了,然后就保存原来的,就是看升级的推送什么时候来了.

  8. POJ1385 Lifting the Stone 多边形重心

    POJ1385 给定n个顶点 顺序连成多边形 求重心 n<=1e+6 比较裸的重心问题 没有特别数据 由于答案保留两位小数四舍五入 需要+0.0005消除误差 #include<iostr ...

  9. 杂项-Java：Tomcat

    ylbtech-杂项-Java:Tomcat 1.返回顶部 1. Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目, ...

  10. UVaLive 6834 Shopping (贪心)

    题意:给定 n 个商店,然后有 m个限制,去 c 之前必须先去d,问你从0到n+1,最短路程是多少. 析:我们我们要到c,必须要先到d,那么举个例子,2 5, 3 7,如果我们先到5再到2,再到7再到 ...