添加vue devtools扩展工具+添加后F12不显示Vue图标

前言:在开启Vue学习之旅时,遇到问题两个问题,第一添加不上vue devtools扩展工具,第二添加完成后,F12不显示Vue图标。查阅了很多博客,自己解决了问题,故写此博客记录。如果你遇到和我一样的问题,希望可以帮到你。

目录

1、vue devtools 扩展程序添加

2、成功添加扩展程序,但在F12没有出现Vue图标

分析问题

解决问题

3、总结


1、vue devtools 扩展程序添加

需要去谷歌商城下载,不过需要翻墙

我找了文件,亲测可用,链接永久有效!!!

连接我放下面了:

链接:https://pan.baidu.com/s/18yS1GYfjwvwMleYzyuJ1cA?pwd=MRJJ 
提取码:MRJJ 

将扩展程序拖到这里,然后重启电脑!!!(我当时没有重启,添加后还是没有看到添加扩展的程序),打开引入vue的程序,Console输入Vue,如下图所示,表示已经将扩展程序添加好了。开心!!!

2、成功添加扩展程序,但在F12没有出现Vue图标

点击扩展程序灰色图标,选中,给它允许。

 

分析问题

有很多教程说是要在manifest.json里将"persistent"改为true,但我的文件打开以后就是true。

还有,引用vue.js代码,需要是开发版本的,生产版本的看不到这个图标。

我检查了一下,我引用的是:<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>,也没有问题。

为了更好地说明白,以上两种建议都自行检查一下,引用vue.js代码检查一下自己的代码,manifest.json这个文件配置,修改步骤如下:

解决问题

检查manifest.json里"persistent"是否为true,如果不是,要改成true

这个文件manifest.json在哪?

谷歌浏览器输入:chrome://version/,将个人资料路径复制

输入路径,找到Extensions文件夹,一路向下打开文件,会看到一个manifest.json文件

 

我的情况都不是以上的两个问题,我进行了如下的操作,打开管理扩展程序

有权访问所有网站,允许访问文件地址,收集各项错误,都选上

 

然后关闭浏览器,重新打开文件,  终于Vue的图标出现了! !!

3、总结

vue学习前奏,虽然是个很简单的配置,但各种论坛博客信息很多,可能和每个人的情况都不一样,比如manifest.json这个文件在哪?很多博客就没讲清楚,当然可能我遇到的问题,和你的问题不一样,我是在翻阅了大量的资料,然后进行各种尝试,把问题解决了,如果对你也有帮助,帮忙点个赞!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/90453.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 Linux 虚拟机上使用 Azure 自定义脚本扩展版本

参考 azure创建虚拟机,创建虚拟机注意入站端口规则开放80端口、 2.转到资源&#xff0c;点击扩展应用程序&#xff0c;创建存储账户&#xff0c;创建容器&#xff0c;上传文件&#xff0c;选择文件&#xff0c;会自动执行部署。 apt-get update -y && apt-get insta…

计算机网络-物理层(二)- 传输方式

计算机网络-物理层&#xff08;二&#xff09;- 传输方式 串型传输与并行传输 串行传输:是指数据是一个比特一个比特依次发送的&#xff0c;因此在发送端和接收端之间&#xff0c;只需要一条数据传输线路即可 并行传输:是指一次发送n个比特而不是一个比特&#xff0c;因此发送…

计算机网络-物理层(一)物理层的概念与传输媒体

计算机网络-物理层&#xff08;一&#xff09;物理层的概念与传输媒体 物理层相关概念 物理层的作用用来解决在各种传输媒体上传输比特0和1的问题&#xff0c;进而为数据链路层提供透明(看不见)传输比特流的服务物理层为数据链路层屏蔽了各种传输媒体的差异&#xff0c;使数据…

django boostrap html实现可拖拽的左右布局,鼠标拖动调整左右布局的大小或占比

一、实现的效果 最近需要在Django项目中,实现一个左右布局的html页面,页面框架使用的是boostrap。但这个布局不是简单的左右分栏布局,而是需要实现可以通过鼠标拖拽的方式动态调整左右两侧布局的大小和占比。效果大致如下: 一开始,页面分为左右两块布局: 鼠标放到中间的…

Python第三方库 - Pandas库

文章目录 1. Pandas介绍2. Pandas基础2.1 引入2.2 数据结构2.2.1 Series2.3 DataFrame2.3.1 概念 3 Pandas - CSV 文件3.1 语法3.2 遇到的问题 4 Pandas - JSON4.1 语法 参考文档 1. Pandas介绍 概念: Pandas 是 Python 的核心数据分析支持库&#xff0c;提供了快速、灵活、明…

Tomcat日志中文乱码

修改安装目录下的日志配置 D:\ProgramFiles\apache-tomcat-9.0.78\conf\logging.properties java.util.logging.ConsoleHandler.encoding GBK

Spring Security6 最新版配置该怎么写,该如何实现动态权限管理

Spring Security 在最近几个版本中配置的写法都有一些变化&#xff0c;很多常见的方法都废弃了&#xff0c;并且将在未来的 Spring Security7 中移除&#xff0c;因此又补充了一些新的内容&#xff0c;重新发一下&#xff0c;供各位使用 Spring Security 的小伙伴们参考。 接下…

若依框架浅浅介绍

由若依官网所给介绍可知 1、文件结构介绍 在ruoyi-admin的pom.xml文件中引入了ruoyi-framework、ruoyi-quartz和ruoyi-generatior模块&#xff0c;在ruoyi-framework的pom.xml文件中引入了ruoyi-system模块。 2、技术栈介绍 前端&#xff1a;Vue、Element UI后端&#xff1a…

面试热题(缺失的第一个正数)

给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 尝试的路途是痛苦的&#xff0c;不断的尝试新方法&#xff0c;错何尝…

flask-----初始项目架构

1.初始的项目目录 -apps 包 ------存放app -user文件夹 -------就是一个app -models.py --------存放表模型 -views.py -------存放主代码 -ext包 -init.py -------实例化db对象 -manage.py -----运行项目的入口 -setting.py -----配置文件 2.各文件内容 manage…

vue里搜索框实现防抖功能

进来调用一个闭包函数debounce()&#xff0c;赋值给一个变量debounceFunc&#xff0c;&#xff08;包闭的功能就是说里面的变量timer和参数一直驻留在函数里面&#xff09; input事件调用一个函数debounceFunc&#xff08;&#xff09;&#xff0c;并且传一个回调searchs函数&a…

创建maven的Springboot项目出现错误:Cannot access alimaven

创建maven的Springboot项目出现错误&#xff1a;Cannot access alimaven 1&#xff09;问题2) 分析问题3&#xff09;解决问题 1&#xff09;问题 创建maven的Springboot项目出现错误&#xff1a; Cannot access alimaven (http://maven.aliyun.com/nexus/content/groups/p…

【Spring】深入探索 Spring AOP:概念、使用与实现原理解析

文章目录 前言一、初识 Spring AOP1.1 什么是 AOP1.2 什么是 Spring AOP 二、AOP 的核心概念2.1 切面&#xff08;Aspect&#xff09;2.2 切点&#xff08;Pointcut&#xff09;2.3 通知&#xff08;Advice&#xff09;2.4 连接点&#xff08;Join Point&#xff09; 三、Sprin…

【Linux进程篇】环境变量

【Linux进程篇】环境变量 目录 【Linux进程篇】环境变量基本概念常见环境变量查看环境变量方法测试PATH测试HOME测试SHELL和环境变量相关的命令环境变量的组织方式通过代码如何获取环境变量命令行参数命令行第三个参数通过第三方变量environ获取 本地变量通过系统调用获取或设置…

[HDLBits] Exams/m2014 q4b

Implement the following circuit: module top_module (input clk,input d, input ar, // asynchronous resetoutput q);always(posedge clk or posedge ar) beginif(ar)q<1b0;elseq<d;end endmodule

组合模式(C++)

定义 将对象组合成树形结构以表示部分-整体’的层次结构。Composite使得用户对单个对象和组合对象的使用具有一致性(稳定)。 应用场景 在软件在某些情况下&#xff0c;客户代码过多地依赖于对象容器复杂的内部实现结构&#xff0c;对象容器内部实现结构(而非抽象接口)的变化…

虹科干货 | 化身向量数据库的Redis Enterprise——快速、准确、高效的非结构化数据解决方案!

用户期望在他们遇到的每一个应用程序和网站都有搜索功能。然而&#xff0c;超过80%的商业数据是非结构化的&#xff0c;以文本、图像、音频、视频或其他格式存储。Redis Enterprise如何实现矢量相似性搜索呢&#xff1f;答案是&#xff0c;将AI驱动的搜索功能集成到Redis Enter…

项目难点:解决IOS调用起软键盘之后页面样式布局错乱问题

需求背景 &#xff1a; 开发了一个问卷系统重构项目&#xff0c;刚开始开发的为 PC 端&#xff0c;其中最头疼的一点无非就是 IE 浏览器的兼容适配性问题&#xff1b; 再之后项目经理要求开发移动端&#xff0c;简单的说就是写 H5 页面&#xff0c;到时候会内嵌在 App 应用或办…

[数据分析与可视化] Python绘制数据地图5-MovingPandas绘图实例

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库&#xff0c;用于处理移动物体的轨迹数据。关于MovingPandas的使用见文章&#xff1a;MovingPandas入门指北&#xff0c;本文主要介绍三个MovingPandas的绘图实例。 MovingPandas官方仓库地址为&#xff1a;mo…

Vue使用jspdf和html2canvas组件库结合导出PDF文件

效果图&#xff1a; 1、安装依赖&#xff1a; npm install html2canvas --save npm install jspdf --save 或 yarn add html2canvas --save yarn add jspdf --save 2、封装全局调用方法&#xff1a;this.$exportPDF(#id,文件名) 新建js文件&#xff1a;/utils/html2Pdf.js&am…