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

news2024/11/23 2:02:06

问题: 刚刚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,操作更方便哦 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux学习笔记之五(父子进程、孤儿进程、僵尸进程、守护进程)

Linux 1、进程1.1、进程的六种状态1.2、创建子进程1.3、添加子进程任务1.4、孤儿进程、僵尸进程、守护进程1.4.1、避免僵尸进程1.4.2、创建守护进程1.4.3、杀死守护进程 1.5、综合练习 1、进程 进程可以简单的理解为一个正在执行的程序,它是计算机系统中拥有资源和…

django建站过程(4)创建文档显示页面

django建站过程(4)创建文档显示页面 创建文档显示页面项目主文件夹schoolapps中的文件urls.py在APP“baseapps”中创建url.py文件编写视图模板继承bootstrap创建head.html创建doclist.html创建docdetail.html 使用 markdown 编辑器安装模块Model 模型的d…

Hello World背后的逻辑

一门语言的开发入门,总是抬手就能整出一个「Hello World Demo」。比如下面这样: 显然,熟悉 iOS 开发的同学都知道,上面这个来自 Objective-C。 今天,我们就从这熟悉的代码入手,来一起研究研究「Hello Worl…

泄露35TB数据,医疗巨头Henry Schein遭受黑猫勒索组织攻击

近日,据Bleeping Computer 网站消息,BlackCat(黑猫)勒索软件团伙将医疗保健巨头Henry Schein 添加到了其暗网泄露网站,并声称其破坏了该公司的网络,窃取了35 TB的敏感文件,这些文件包括了Henry …

BES 在大规模向量数据库场景的探索和实践

导读 本文整理自 2023 年 9 月 5 日 QCon 全球软件开发大会 2023 北京站 —— 向量数据库分论坛的同名主题演讲《BES 在大规模向量数据库场景的探索和实践》。 全文5989字,预计阅读时间15分钟。 向量数据库是一种专门用于存储和查询向量数据的数据库系统。通过 Emb…

verdi如何打开时可以加载配置比如字体

打开tcl使能 找到配置字体的命令 其实其他有需要的文件配置都可以在这里找到对应的指令 存储文件 新建verdi001.tcl文件 输入想要调整的字体以及大小 verdiSetFont -font "Bitstream Vera Sans" -size "18" verdiSetFont -monoFont "Courier&q…

【 云原生 | K8S 】kubectl 详解

目录 1 kubectl 2 基本信息查看 2.1 查看 master 节点状态 2.2 查看命名空间 2.3 查看default命名空间的所有资源 2.4 创建命名空间app 2.5 删除命名空间app 2.6 在命名空间kube-public 创建副本控制器(deployment)来启动Pod(nginx-wl…

做哪些副业可以日赚一百?对程序员来说简直不要太容易!

日赚一百?对程序员来说简直不要太容易!下面给程序员们推荐一些日赚100的副业: ①外包接单 程序员简单粗暴赚钱的副业之一。 外包接单的类型包括但不限于:软件开发、硬件开发、小程序功能开发、web开发……大到一个系统的开发、…

什么样的CRM系统更适合外贸企业?

外贸CRM系统作为外贸客户关系管理的工具,已经成为了当下外贸企业对外贸易过程中不可或缺的一环。那什么样的CRM系统更适合外贸企业?小Z向您推荐Zoho CRM。下面说说它到底有什么好处和作用。 一、搭建更高效的客户关系管理系统 外贸企业从前期推广、开发…

202205(第13届)蓝桥杯Scratch图形化编程青少组(国赛_中级)真题

202205(第13届)蓝桥杯Scratch图形化编程青少组(国赛_中级)真题 第 1 题 以下程序,小猫在移动完成后不能回到初始位置的是?( ) A: B: C: D: 第 2 题 以下程序,询问…

SAP 10策略测试及简介

从今天开始将把PP模块中常用的一些策略进行一个测试,编写成系统的文档,有点策略经常不用自己都忘了一些策略的特性。所以还是有必须形成文档的形式记录下来 1、首先准备好物料 成品物料为AB0,在MRP3视图中维护对应的策略组的10 同时选择消耗模式为2.消耗期间都是999 2、其他…

环境变量小结

一 常见环境变量介绍 1 PATH 到了现在,我们也知道我们轻轻敲下ls指令,其实会转为一个可执行文件在运行,也就变成了一个进程,所以ls是让文件运行,./test也是让文件运行,凭什么我们的可执行文件就要加个./(这…

IDEA调试总结

前言 由于 IDEA 每个人使用的版本不同以及快捷键的设置不同,所以忽略了快捷键的使用。如果不知道快捷键请在 IDEA 工具栏里面点开 Run 菜单即可知悉 图标介绍 下面咱们进入看图说话环节,下列图标小伙伴知道是啥功能么?日常开发进行 Debug 使…

Spring-Security前后端分离权限认证

前后端分离 一般来说,我们用SpringSecurity默认的话是前后端整在一起的,比如thymeleaf或者Freemarker,SpringSecurity还自带login登录页,还让你配置登出页,错误页。 但是现在前后端分离才是正道,前后端分离的话,那就…

React状态管理方案盘点

您好, 如果喜欢我的文章或者想上岸大厂,可以关注公众号「量子前端」,将不定期关注推送前端好文、分享就业资料秘籍,也希望有机会一对一帮助你实现梦想 前言 本文不会介绍各个状态管理工具的具体使用或者如何二次封装&#xff0c…

自动驾驶系统激光雷达传感器反射率标定板

自动驾驶技术正在全球范围内快速发展和推广。在中国,自动驾驶技术也得到了高度重视和大力支持。中国政府已经出台了一系列政策,推动自动驾驶技术的发展和应用。例如,上海、北京等地已经开放了自动驾驶测试道路,并开展了自动驾驶公…

选择CRM系统主要看哪些指标?

很多企业都想选择一款好用的CRM客户管理系统,但是面对众多类型、品牌的CRM却犯了难。下面我们来说说,企业要想选到一款适合自己的、好用的CRM系统,主要看哪些指标?这里有6个步骤,可以帮您做到。 第1步:了解…

亚马逊鲲鹏系统六大优势

亚马逊鲲鹏系统六大优势凭借其独特的能力,完全模拟真实的人类行为。只需几个简单的步骤 就可以自由安排任务,让所有账户随时发挥最大的作用。 1、全自动化操作 可以全自动批量注册买家号、AI智能养号、全自动批量测评,模拟人类的操作行为例…

亚马逊鲲鹏系统能做什么

亚马逊鲲鹏系统是一款能绕过亚马逊智能检测,完全模拟人类真实行为,通过模拟真实的人流量来帮助你提升你的产品排名,让你的产品出现在搜索首页,从而快速提高你的销售业绩的营销工具! 主要的功能有批量注册买家号、AI智能…

微服务概念

微服务 微服务是什么 In short, the microservice architectural style [1] is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource A…