chrome 的vue3的开发者devtool不起作用

问题: 刚刚vue2升级到vue3,旧的devtool识别不了vue3数据。

原因:

devtool版本过低。升级到最新。

解决:

去github下载vuetool项目代码:

GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

下载项目解压,目录下cmd

执行编译

  • 因为devtools必须使用yarn进行下载,所以我们要下载yarn这个包管理工具。

  • 执行命令下载yarn:

     npm install -g yarn
    
  • 安装好yarn后,通过yarn来安装相关依赖:

     yarn install

  • 依赖安装完成后,开始打包build。 需要注意,这里的命令需要带watch,如果不带,会出错

    yarn run build:watch
    
  • 代码执行一阵后,出现此图画面,并没有其他反应后,此时Ctrl+C退出即可。

  • 接下来执行编译给chrome版本脚本

yarn run dev:chrome

出现下面的界面后就可以Ctrl+C退出终端了:

 

 编译成功话,可以用看到这个包

chrome浏览器加载

 加载扩展程序ok,错误不用管

运行vue3的页面,devtool可以识别了。 

最后分享我编译成功的shell-chrome包:

链接: https://pan.baidu.com/s/1zKEgGxT5uAvofpD-T1Oa_w?pwd=72m5 提取码: 72m5 复制这段内容后打开百度网盘手机App,操作更方便哦 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#基于inpoutx64读写ECRAM硬件信息

inpoutx64.dll分享路径: 链接:https://pan.baidu.com/s/1rOt0xtt9EcsrFQtf7S91ag 提取码:7om1 1.InpOutManager: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi…

Linux 基本语句_10_进程

进程和程序的区别: 程序是一段静态的代码,是保存在非易失储存器上的制令和数据的有序集合,没有任何执行的概念;而进程是一个动态的概念,它是程序的一次执行过程,包括了动态创建、调度、执行和消亡的整个过程…

JVM-虚拟机的故障处理与调优案例分析

案例1:大内存硬件上的程序部署策略 一个15万PV/日左右的在线文档类型网站最近更换了硬件系统,服务器的硬件为四路志强处理器、16GB物理内存,操作系统为64位CentOS 5.4,Resin作为Web服务器。整个服务器暂时没有部署别的应用&#…

搭建关键字驱动自动化测试框架

前言 上篇文章我们已经了解到了数据驱动自动化测试框架是如何构建和驱动测试的!那么这篇文章我们将了解关键字驱动测试又是如何驱动自动化测试完成整个测试过程的。关键字驱动框架是一种功能自动化测试框架,它也被称为表格驱动测试或者基于动作字的测试。…

make/makefile

目录 makefile介绍 什么是makefile 为什么要有makefile 编写makefile .PHONY 清理文件 时间问题 为什么不能总是执行 怎么判断程序是不是最新 修改单个对其他时间对其他时间的影响 make默认执行 makefile扩展 linux项目自动化构建工具-make/makefile make是一条命…

PHP网站源码 知识付费分站代理自助下单系统 自带多款模板

源码测评:功能很齐全,有可以对接的总站,应该是对接好就可以推广赚钱了,但是这种感觉能赚钱的就那么几个人,见仁见智吧! 截图演示: 转载自 https://www.qnziyw.cn/cmsmb/qtcms/3952.html

Three.js 实现简单的PCD加载器(可从本地读取pcd文件)【附完整代码】

1 功能实现 初始会显示我们之前 SfM 做出的点云,包括相机位置可以点击右上角加载你本地的PCD文件可以通过选择多个文件加载多个点云并显示在同一场景中可以通过左上角的控制界面查看/调整点云的属性,如点大小、颜色等可以通过右上角的控制界面选择旋转 …

Linux下内网穿透实现云原生观测分析工具的远程访问

📑前言 本文主要是Linux下内网穿透实现云原生观测分析工具的远程访问设置的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是青衿🥇 ☁️博客首页:CSDN主页放风讲故事 &…

C++20 Text formatting

C20 Text formatting 格式化字符串&#xff0c; 和 python 类似。 std::formatter - cppreference.com string — Common string operations — Python 3.12.0 documentation 新格式库位于 <format> 头文件中。格式库基于 Python3 中的 str.format() 方法建模。格式…

一文6个步骤带你实现接口测试入门!

一、接口测试概述 1 什么是接口测试&#xff1a; 接口测试是测试系统组件间交互的一种测试。接口测试主要用于检测外部系统与系统之间&#xff0c;内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑…

直播会议一体机安卓主板_5G智能会议一体机双屏异显设计

5G直播会议一体机主板是专门为支持音视频输入输出而设计的&#xff0c;内置有安卓13系统&#xff0c;可兼容多种直播和会议软件。该产品可广泛应用于智能会议一体机、便携式直播设备、录播导播、无人机直播以及视频传输等多个领域。 这款主板采用了国产6纳米旗舰芯片紫光展锐T8…

ChatRule:基于知识图推理的大语言模型逻辑规则挖掘11.10

ChatRule&#xff1a;基于知识图推理的大语言模型逻辑规则挖掘 摘要引言相关工作初始化和问题定义方法实验 摘要 逻辑规则对于揭示关系之间的逻辑联系至关重要&#xff0c;这可以提高推理性能并在知识图谱&#xff08;KG&#xff09;上提供可解释的结果。虽然已经有许多努力&a…

前端 a链接 如何实现下载功能

目录 前言 标签 download a 标签链接下载的实现 1. 整体流程 2. 实现步骤 3. 类图 4. 代码示例 download 使用注意点 1. 同源 URL 的限制 2. 不能携带 Header Blob 转换 方法1. 用作 URL&#xff08;blob:&#xff09; 方法2. 转换为 base64&#xff08;data:&…

无人机航迹规划:五种最新智能优化算法(COA、SWO、KOA、GRO、LO)求解无人机路径规划MATLAB

一、五种算法&#xff08;LSO、SWO、KOA、GRO、LO&#xff09;简介 1、小龙虾优化算法COA 小龙虾优化算法&#xff08;Crayfsh optimization algorithm&#xff0c;COA&#xff09;由Jia Heming 等人于2023年提出&#xff0c;该算法模拟小龙虾的避暑、竞争和觅食行为&#xf…

数据分析实战 | 线性回归——女性身高与体重数据分析

目录 一、数据集及分析对象 二、目的及分析任务 三、方法及工具 四、数据读入 五、数据理解 六、数据准备 七、模型训练 八、模型评价 九、模型调参 十、模型预测 实现回归分析类算法的Python第三方工具包比较常用的有statsmodels、statistics、scikit-learn等&#…

【CASS精品教程】cass 3d基于osgb三维模型生成等高线的两种方法

对于植被、房屋稀少的地方,可以基于osgb模型直接生成等高线。本文讲解在cass11.0 3d中基于osgb三维模型生成等高线的两种方法。 一、加载osgb三维模型 二、生成等高线 1. 绘制等高线 cass11版本提供了绘制单个等高线的功能。 点击【绘制等高线】,提示输入等高距。 输入固定…

MySQL的高阶语句

数据库的权限一般很小&#xff0c;工作中使用最多的场景就是查 排序、分组、子查询、视图、多表连接查询&#xff08;左连接、右连接、内连接&#xff09; create TABLE info ( id int(4) primary key, NAME varchar(5) not null, score decimal(5,2), address varchar(20)…

渗透测试必备工具--Metasploit(流程梳理与meterpreter权限分析)

目录 一、攻击前期准备必会的命令&#xff08;msf流程&#xff09; 1、启动&#xff1a;msfdb run 或者 msfconsole 2、Payload生成&#xff1a;msfvenom 3、查找相关模块&#xff1a;search 4、选择使用模块&#xff1a;use 5、返回上一层&#xff1a;back 6、查看需要…

猫罐头哪家好?宠物店自用的5款猫罐头推荐!猫咪嘎嘎炫~

亲爱的铲屎官们&#xff0c;你们是否会为猫咪选购猫罐头而感到烦恼&#xff1f;你们是否渴望了解哪些猫罐头在宠物界有着良好的口碑&#xff1f;猫罐头&#xff0c;作为猫咪日常饮食中的重要组成部分&#xff0c;其品质直接影响到猫咪的健康和幸福。 猫罐头哪家好&#xff1f;作…

go 引入包报错“构建约束排除‘D/...vendor/pkg包’”中所有的GO文件

解决方案&#xff1a; 方案一&#xff1a;没生效 go - 构建约束排除所有 Go 文件 - IT工具网 go modules - build constraints exclude all Go files in - Stack Overflow 方案二&#xff1a;生效&#xff0c;手动初始化创建一个目录 后续再研究原因&#xff0c;有明白的大…