方式一：通过谷歌应用商店进行安装 vue devtools

方式二：手动安装  下载https://github.com/vuejs/vue-devtools

安装

方式一：打开谷歌浏览器

点击扩展程序，选择应用商店

如果不能访问外网，就不能通过此方法安装，安装完重启浏览器就可以

访问localhost:8080 在控制台查看是否正常显示插件

方式二安装

打开https://github.com/vuejs/vue-devtools

选择master分支

下载zip比较方便

解压vue-devtools-master

cd vue-devtools-master

先运行 npm i  安装项目依赖

再运行 npm run build 进行编译生产

生成shells目录，shells目录里有chrome目录，把它加载到浏览器里

选择chrome目录就可以

重启浏览器，输入localhost:8080

查看控制台

安装成功

vue-DevTools安装使用的更多相关文章

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

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

  2. Vue DevTools 安装应用

    1.https: //github.com/vuejs/vue-devtools  从这上面下载Vue DevTools: 2.npm install(cnpm install) && ...

  3. Vue安装及插件Vue Devtools

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

  4. 【22】Vue 之 Vue Devtools

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

  5. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  6. vue.js devtools安装

    在调试的时候chrome会提示安装vue devtools,我以为是要在chrome的程序商店直接安装,但是国内对谷歌的和谐,无法访问谷歌商店内容 官方有源代码,可以下载下来自行编译安装 官方地址:h ...

  7. Vue中devtools安装使用

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

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

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

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

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

  10. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

随机推荐

  1. ASP.NET Core 开启后台任务

    本文告诉大家如何通过 Microsoft.Extensions.Hosting.BackgroundService 开启后台任务 实现 BackManagerService 类继承 Backgroun ...

  2. jQuery 工具类函数-检测浏览器是否属于W3C盒子模型

    浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模 ...

  3. 数据预处理以及探索性分析(EDA)

    1.根据某个列进行groupby,判断是否存在重复列. # Count the unique variables (if we got different weight values, # for e ...

  4. 关于redis有序集合http://www.runoob.com/redis/redis-sorted-sets.html

    redis有序集合和集合一样,元素都是字符串类型,而且不能重复 和普通集合不同的是它关联一个double类型的分数,redis是同个元素的分数来对元素进行排序 有序集合的元素是唯一的,但是分数可以重复 ...

  5. win10安装Keras报错处理

    本机已经安装好TensorFlow安装Keras的过程中遇到了些问题,解决后做一下记录: 1.Keras与TensorFlow的关系 Keras默认以TensorFlow为后端,同时可选以Theano ...

  6. ES的索引查询和删除

    postman 1.查看es状态 get http://127.0.0.1:9200/_cat/health 红色表示数据不可用,黄色表示数据可用,部分副本没有分配,绿色表示一切正常 2.查看所有索引 ...

  7. 用Tasker实现收到Android手机短信自动转发到邮箱

    发送短信到邮箱的原理与 <用Tasker实现收到Android手机短信自动转发到邮箱>有些类似.  发送短信到邮箱是利用Ifttt这个服务将短信转发到邮箱中.Ifttt服务的可扩展性很强, ...

  8. jquery中获取ajax请求返回数据的方法

    function getPageTotalAndDataTotal(page) { //设置一个变量用于接收ajax返回的值 var pageTotal = 0; // 获取页数与数据总数 $.aja ...

  9. eclipse中如何配置tomcat

    1.打开eclipse上面的Windows选项,选择Preferences==>Server==>Runtime Environments==>Add 2.选择你电脑中安装的tomc ...

  10. 1062 最简分数 (20分)C语言

    一个分数一般写成两个整数相除的形式:N/M,其中 M 不为0.最简分数是指分子和分母没有公约数的分数表示形式. 现给定两个不相等的正分数 N1/M1和 N2/M​2,要求你按从小到大的顺序列出它们之间 ...