【插件工具】Vue.js is detected on this page. Open DevTools and look for the Vue panel报错及安装vue-detools
如果已经安装了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的方法
- 首先如果没有npm的小伙伴,先去 Node官网 下载nodejs,然后会一起下载npm,最好下载node@8+版本
- 然后去github下载vue-devtools(github下载地址:https://github.com/vuejs/vue-devtools)解压ZIP到桌面
- 可以直接使用window里的命令行进入vue-devtools文件安装依赖及打包,也可以把该文件拖入到vscode或者webStorm中,打开终端执行
npm install
安装它的依赖也就是node_modules里面的插件,如果中途卡住了或者下载太慢,可以 淘宝NPM镜像执行以下$ npm install -g cnpm --registry=https://registry.npm.taobao.org
- install完成之后再
npm run build
,完成之后进入C:\Software\vue-devtools-master\shells\chrome目录下,修改mainifest.json 文件中的persistent属性的值为true。(根据自己安装的目录去找mainifest.json 文件) - 打开谷歌浏览器 —— 更多工具 ——扩展程序—— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中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相关推荐
- 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 ...
- 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 ...
- Vue.js not detected 解决办法
问题描述: 在谷歌安装了Vuejs Devtools扩展程序,但是运行自己写的页面,vue图标没有亮起来,控制台也没有Vue选项,悬浮右上角Vue Devtools小图标显示"Vue.js ...
- Vue.js not detected
安装vue devtools工具,在chrome中一直是灰色,title是Vue.js not detected ① F12关闭开发者模式 ② 刷新 ③ 然后再按F12就好了 网上看到的,居然真的有用 ...
- 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 ...
- 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 ...
- stylus vue 报错_【Vue】Re01 理论概念和入门上手
一.Vue概述 什么是渐进式?1.把Vue作应用的一部分嵌套项目中2.如果完全抛弃其他组件和框架,Vue又具有丰富的生态和库莱支持3.Core + Router + VueX 满足项目绝大多数的需求- ...
- 【疑难杂症】vue npm run build的时候遇到Module build failed: Error: No ESLint configuration found.报错提示咋办呀?
有一天某个项目轮到我手里,兴高采烈的运行结果--我去这-- 直接找到config/index.js
- 报错,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 ...
最新文章
- Windows Server 2012 HyperV之SMB共享实时迁移
- 程序员们请收好这本JVM日历:Java 2018大事回顾
- Go服务迁到K8s后老抽风重启? 记一次完整的线上问题解决过程
- 生产力提升! 自己动手自定义Visual Studio 2019的 类创建模板,制作简易版Vsix安装包...
- Security+ 学习笔记36 嵌入式系统安全
- CentOS7.5下KVM虚拟机安装
- 搭建自己的 CDN 会有哪些乐趣和好处?
- 大学计算机作业互评评语简短,学生作业互评表的填写方法
- HDC1080 驱动程序代码(C语言版)
- kityminder-editor 百度脑图与my-mind 使用体验
- 新猿木子李:0基础学python培训教程 Python操作Excel之写入数据
- Java设计模式学习笔记
- 生产任务计划单,金蝶KIS旗舰版专业版K3WISE,生产管理软件ERP,金蝶生产任务管理,生产计划管理,自动下推生产领料单
- 有关计算机软件的心得1500,plc心得体会1500字
- python关键字输出
- 仿头条新闻资讯dz模板/Discuz新闻资讯商业版GBK模板
- 好东东-汉语词法分析系统ICTCLAS (Institute of Computing Technology, Chinese Lexical Analysis System)
- 大华java面试经验_大华面试(Java 基础)
- Linux下ffmpeg的安装
- 幸运数字 HackerRank - leonardo-and-lucky-numbers
热门文章
- 杭州联合银行 x 袋鼠云:打造智能标签体系,助力银行大零售业务转型
- 『3Dmax』打造锁链建模教程
- pytorch-California House Prices(Kaggle竞赛)
- 在图表上快速检验交易理念
- android+截图长屏软件,手机摄影:一款真正好用的安卓端长截图APP,没有之一!...
- 如何创建 Azure AKS 集群?
- JAVA堆溢出OOM场景模拟及排除过程
- js for循环执行顺序
- 1995年 章丘第二职业中专计算机专业,章丘第二职业中等专业学校2020年招生录取分数线...
- 不一样的kafka系列#server服务端详解