如果已经安装了vue-devtools可以不看这部分

先介绍三种安装vue-devtools的方法:
① 如果就可以直接去chrome商店下载该插件

② 非科学上网的小伙伴给你们准备vue-detools一分钟成功安装方法,这里的版本为5.1.0版本,如果需要最新的版本的话就去git下载看第③步骤
-------------------------------------------------5.1.0----------------------------------------
链接: https://pan.baidu.com/s/1i75Nwz-CRbnIJBr5qROvWA 提取码: 5w84
-------------------------------------------------------------------------------------------------
打开chrome浏览器 >>> 更多工具 >>> 扩展程序(打开开发者模式),然后直接下载将它拖到里面,就会提示你是否安装vue-devtools,有老旧版本的记得先卸载在安装,然后右上角就会出现该插件的图标啦,如果有vue项目就会亮起来;

③ 使用npm install的方法

  1. 首先如果没有npm的小伙伴,先去 Node官网 下载nodejs,然后会一起下载npm,最好下载node@8+版本
  2. 然后去github下载vue-devtools(github下载地址:https://github.com/vuejs/vue-devtools)解压ZIP到桌面
  3. 可以直接使用window里的命令行进入vue-devtools文件安装依赖及打包,也可以把该文件拖入到vscode或者webStorm中,打开终端执行npm install安装它的依赖也就是node_modules里面的插件,如果中途卡住了或者下载太慢,可以 淘宝NPM镜像执行以下 $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  4. install完成之后再npm run build,完成之后进入C:\Software\vue-devtools-master\shells\chrome目录下,修改mainifest.json 文件中的persistent属性的值为true。(根据自己安装的目录去找mainifest.json 文件)
  5. 打开谷歌浏览器 —— 更多工具 ——扩展程序—— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮

汇总一下不能用或者报错的原因及其解决方法

问题1:
装完Vue Devtools,想用来查看用vue.js写的页面,然而却发现图标灰色,无法使用,提示检测不到Vue.js

关于这个persistent参数可以参考大神总结的:
persistent为true时,在background字段中指出的js脚本将持续运行在后台,而若persistent为false,则这些脚本将只在事件活动时运行,事件不活动时就会释放其占有的内存等资源。

问题2:
如果图标亮但不能调试并且提示:
Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author

是因为你页面引用的vue是压缩版本的,默认会关闭调试,要引入vue.js;在需要使用该插件的vue项目中的main.js入口文件添加这段代码配置vue的环境,注意此时最好重新启动项目,再次打开浏览器,就可以解决上面的问题了:

Vue.config.devtools = true

【插件工具】Vue.js is detected on this page. Open DevTools and look for the Vue panel报错及安装vue-detools相关推荐

  1. Vue插件报错:Vue.js is detected on this page.

    Vue插件报错:Vue.js is detected on this pag 下载Vue插件 解决:Vue.js not detected 解决:Vue.js is detected on this ...

  2. Vue.js is detected on this page. Devtools inspection is not available becaus...的解决方法

    Vue.js is detected on this page. Devtools inspection is not available becaus-[的详细解决方法] 问题描述: 在已经下载Vu ...

  3. Vue.js not detected 解决办法

    问题描述: 在谷歌安装了Vuejs Devtools扩展程序,但是运行自己写的页面,vue图标没有亮起来,控制台也没有Vue选项,悬浮右上角Vue Devtools小图标显示"Vue.js ...

  4. Vue.js not detected

    安装vue devtools工具,在chrome中一直是灰色,title是Vue.js not detected ① F12关闭开发者模式 ② 刷新 ③ 然后再按F12就好了 网上看到的,居然真的有用 ...

  5. Vetur报错:The Vue Language Server server crashed 5 times in the last 3 minutes.

    今天Vetur莫名奇妙无法启动了.打开工程,.vue文件没有智能提示了. 报错内容为 The Vue Language Server server crashed 5 times in the las ...

  6. perfect scrollbar插件无限上拉bug,以及export default (imported as xxx) was not found in xxx报错

    1.解决bug 不要用npm安装,因为这个插件有个bug,有时候会出现可以无限上拉的bug,去cdn里面下载源码,修改js文件的333行(V1.5.0版本): i.containerWidth = M ...

  7. stylus vue 报错_【Vue】Re01 理论概念和入门上手

    一.Vue概述 什么是渐进式?1.把Vue作应用的一部分嵌套项目中2.如果完全抛弃其他组件和框架,Vue又具有丰富的生态和库莱支持3.Core + Router + VueX 满足项目绝大多数的需求- ...

  8. 【疑难杂症】vue npm run build的时候遇到Module build failed: Error: No ESLint configuration found.报错提示咋办呀?

    有一天某个项目轮到我手里,兴高采烈的运行结果--我去这-- 直接找到config/index.js

  9. 报错,atmSecondMenu.vue?bcc9:231 Uncaught (in promise) TypeError: Cannot read property ‘length‘ of null

    问题: atmSecondMenu.vue?bcc9:231 Uncaught (in promise) TypeError: Cannot read property 'length' of nul ...

最新文章

  1. Windows Server 2012 HyperV之SMB共享实时迁移
  2. 程序员们请收好这本JVM日历:Java 2018大事回顾
  3. Go服务迁到K8s后老抽风重启? 记一次完整的线上问题解决过程
  4. 生产力提升! 自己动手自定义Visual Studio 2019的 类创建模板,制作简易版Vsix安装包...
  5. Security+ 学习笔记36 嵌入式系统安全
  6. CentOS7.5下KVM虚拟机安装
  7. 搭建自己的 CDN 会有哪些乐趣和好处?
  8. 大学计算机作业互评评语简短,学生作业互评表的填写方法
  9. HDC1080 驱动程序代码(C语言版)
  10. kityminder-editor 百度脑图与my-mind 使用体验
  11. 新猿木子李:0基础学python培训教程 Python操作Excel之写入数据
  12. Java设计模式学习笔记
  13. 生产任务计划单,金蝶KIS旗舰版专业版K3WISE,生产管理软件ERP,金蝶生产任务管理,生产计划管理,自动下推生产领料单
  14. 有关计算机软件的心得1500,plc心得体会1500字
  15. python关键字输出
  16. 仿头条新闻资讯dz模板/Discuz新闻资讯商业版GBK模板
  17. 好东东-汉语词法分析系统ICTCLAS (Institute of Computing Technology, Chinese Lexical Analysis System)
  18. 大华java面试经验_大华面试(Java 基础)
  19. Linux下ffmpeg的安装
  20. 幸运数字 HackerRank - leonardo-and-lucky-numbers

热门文章

  1. 杭州联合银行 x 袋鼠云:打造智能标签体系,助力银行大零售业务转型
  2. 『3Dmax』打造锁链建模教程
  3. pytorch-California House Prices(Kaggle竞赛)
  4. 在图表上快速检验交易理念
  5. android+截图长屏软件,手机摄影:一款真正好用的安卓端长截图APP,没有之一!...
  6. 如何创建 Azure AKS 集群?
  7. JAVA堆溢出OOM场景模拟及排除过程
  8. js for循环执行顺序
  9. 1995年 章丘第二职业中专计算机专业,章丘第二职业中等专业学校2020年招生录取分数线...
  10. 不一样的kafka系列#server服务端详解