vue3中使用devtools（chrome）（推荐第三种方法）

已于 2023-11-29 12:15:19 修改
阅读量5.1k 收藏 6
点赞数 3
文章标签： vscode
于 2022-04-11 16:25:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29184685/article/details/124102150
版权

方法一

1、下载最新版本：https://github.com/vuejs/devtools/tree/v6.1.4
在这里插入图片描述
2、解压到文件夹中
在这里插入图片描述

3、命令行进入文件夹中（或者用VScode等的终端操作），并且执行命令yarn install安装依赖
在这里插入图片描述
4、执行：yarn run build，到下图表示完成
在这里插入图片描述

5、chrome浏览器中打开chrome://extensions/，并且拖入packages文件下的shell-chrome文件夹
在这里插入图片描述
下图表示完成

在这里插入图片描述
6、重新打开浏览器
在这里插入图片描述

方法二

如果上面那个方法不行，可以试试这个
1、拉取安装包

git clone https://gitee.com/wwjwuweijie/vue2-vue3-devtools.git

2、打开扩展程序：chrome://extensions/
先确认打开了开发者模式，再点击加载已解压的扩展程序就可以自动加载了
在这里插入图片描述

方法三：

打开网址：https://chrome.zzzmh.cn/info/ljjemllljcmogpfapbkkighbhhppjdbg，选择推荐下砸
在这里插入图片描述

下载成功后解压，打开谷歌浏览器的扩展程序（chrome://extensions/），并打开开发者模式，把刚刚解压的程序包拖到浏览器中
在这里插入图片描述
添加后重新打开浏览器
在这里插入图片描述

阿眠
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue3.0快速入门
11-23
前端人年终技术升级 2h极速入门Vue3.0 年终岁尾，又到了打工人写总结的时候，各位前端工程师，今年你的总结里是否有“Vue3.0”的身影呢？ 9月Vue3.0问世，对前端人来说，这是技术升级的一大步，同样也是一场学习效率的角逐。  不论你是： Vue2.x的老用户  or  没有接触过Vue的小白； 前端工程师  or  想从事前端岗位的学生   只要你与前端工作有关， Vue3.0的问世都可能是你脱颖而出的好机会！ 抢先进阶，成为首批Vue3.0开发者，升职、加薪、找工作一路绿灯！   你为Vue3.0入门，准备了多少学习时间？ 三天？五天？还是七天？ 完全不需要！本门课程可以帮您在2小时内极速入门。 即刻学习 年终完成项目升级 Vue在全球拥有超130万用户，在不同场景中均有应用；在国内Vue是最火热的前端框架，迭代后Vue3.0框架更快捷、精悍，容易维护，同时还添加了新特性，对于前端工作者来说，这是一次重要的进阶。   To 学生党&求职者：提升简历丰富度、提高自身价值，增加面试成功的几率 To 前端工程师：完成现有项目的优化升级，全面适配Vue3.0，年终总结上又可以添上一笔啦！ 精华知识+名师指导 Vue小白也能快速进阶 问：没有用过Vue2.0，可以直接学习Vue3.0吗？ 答：没问题，本门课程着重于基础夯实，Vue小白也能轻松掌握。   问：学完本门课程，我可以得到什么？ 答：你可以建立对Vue知识的认知；       了解Vue的基本使用与调试方法；       掌握Vue的常用指令。   问：2个小时的课程，知识要点全面吗？ 答：课程围绕Vue3.0入门开讲，全套知识要点浓缩在2个小时的课程中，学员每一分钟都可以Get满满干货！   问：师资力量有保障吗？ 答：本门课程邀请到了南京大学软件工程硕士汤小洋，作为CSDN学院金牌讲师，汤小洋老师在本站拥有超15万学员。  汤小洋老师曾就职于擎天科技、中软国际、华为等上市公司，从事软件开发及软件教育培训多年，具有丰富的实战经验，授课耐心细致，通俗易懂，风趣幽默，善于将复杂问题简单化，曾为多家知名企业进行软件开发实训。
vue3-devtools
05-06
vue3在chrome调试工具，下载即用，无需安装任何依赖包
正确开启vue3.0调试工具vue-devtools
球球不吃虾WHR2349博客
03-12 6765
正确开启vue3.0调试工具vue-devtools 1.去https://github.com/vuejs/vue-devtools官网下载，注意下载beta版本的，这个才是vue3.0用的 2.如果是用火狐浏览器，点击beta应该是直接进入火狐的插件中心，直接安装就行了。 如果安装谷歌版的，下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件，6.0.0.7是我下载时候的最新版本号，下载好以后解压，进去npm install一下。然后就安装一下就o了。 我火狐和谷歌都安
Vue3-devtools开发者工具制作与安装
最新发布
2301_81591899的博客
04-12 538
学习Vue3自然离不开调试工具Vue3-Devtools，所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。
VUE3 VUE-DEVTOOLS 安装
油墨香^-^的博客
04-17 1536
vue-devtools，对于vue前端开发者来说并不陌生，该工具能让我们实时查看当前页面数据，哪些组件被缓存，以及vuex的实时变量，总之有了这个工具，能帮我们更好排查问题。npm采用最新版本，需要注意的是，安装Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先我们要安装yarn。由于众多开发者采用谷歌浏览进行开发且第一种方式显然是不支持的，一般我们无法访问到谷歌地址，因此本篇针对谷歌浏览器进行讲解。需要注意，这里的命令带了watch，如果不带watch，会出错。
vue-devtools chrome vue插件
10-27
vue-devtools chrome vue插件
vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件
03-28
（1）vue 2.x 调试工具：vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件； （2）直接安装使用无需自己编译； （3）安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的压缩包解压后的“ vue_devtools_chrome_5.3.4.crx ”拖到Chrome上去即可安装； （4）如果安装的时候报错：程序包无效:"CRX_HEADER_INVALID"解决方法：将扩展名.crx改为.rar解压出来，然后使用“加载已解压的扩展程序”进行安装；
vue3 devtools 安装指南
weixin_47180815的博客
07-15 4832
vue3 devtools安装指南
【前端开发工具】VUE3 devtools安装
zxsy19966的博客
07-01 1万+
Vue3 devtools安装
vue3安装devtools
weixin_48877763的博客
03-14 1085
vue3 devtools安装
【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建
前端知识分享喵
09-01 2338
Vue3新特性、vue-devtools 调试工具、脚手架搭建
Vue3-devtools开发者工具正确安装方法
热门推荐
Zhang_wang_yun的博客
05-30 1万+
学习Vue3自然离不开调试工具Vue3-Devtools，所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。
vue devtools chrome扩展离线下载
08-24
vue devtools chrome扩展离线下载
vue3_devtools.zip
11-08
vue3谷歌调试工具
vue3 devtools 版本6.5.0
05-04
GitHub上构建完的包，解压后，在Chrome插件管理-加载已解压的扩展程序，即可使用
Chrome 安装Vue插件vue-devtools
06-24
开箱即用 加压包，找到shells下的chrome，再打开谷歌浏览器的扩展程序选中chrome
chrome插件 vue-devtools离线安装包
04-27
版本5.3.3，从github下载的源码自己build出来的。 解压文件，从谷歌扩展程序里加载文件夹即可。
vue3开发者工具Devtools安装教程（解决Vue.js not detected，工具包，离线安装）
zxcve的博客
06-24 4325
前言：Devtools对vue前端开发人员来说必不可少，但Vue3的Devtools与Vue2的Devtools版本不同，所以vue3页面使用此工具的时候图标变灰且显示：Vue.js not detected。因此刚开始学习Vue3 的小伙伴们需要重新安装Vue3版本的Devtools...
配置vue3适用的vue-devtools
SilenceJude的博客
12-12 2072
然后执行yarn run build，我看到有的说执行yarn run build:watch，我试了下很慢，非常慢，最后只执行了yarn run build。打开chrome的拓展程序，选择加载已解压的拓展程序，然后找到项目中，packages目录下的shell-chrome文件夹，选择文件夹进行添加即可。进入下载好的vue/devtools项目库，项目根目录下运行yarn install。vue/devtools的项目库，必须使用yarn来编译，npm会报错。6、重启浏览器，运行项目。
vue3 devtools 下载
07-22
### 回答1： 要下载Vue 3 Devtools，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了最新版本的Google Chrome浏览器。因为Vue 3 Devtools是作为Chrome浏览器的扩展程序提供的。 2. 打开Google Chrome浏览器，并在地址栏中输入chrome://extensions/，然后按下回车键。 3. 在扩展程序页面的左上角，您将看到一个开发者模式的开关。点击该开关，确保已经启用了开发者模式。 4. 然后，继续向下滚动页面，找到一个名为“Vue.js devtools”的选项，点击下面的“获取更多扩展程序”按钮。 5. 在打开的Chrome网上应用店页面中，搜索“Vue.js devtools”并点击搜索结果中的第一个扩展程序。 6. 在扩展程序页面中，点击右上角的“添加至Chrome”按钮。 7. 在弹出的确认对话框中，点击“添加扩展程序”。 8. 现在，Chrome浏览器将开始下载并安装Vue 3 Devtools扩展程序，安装完成后，您将看到Vue图标会出现在Chrome浏览器右上角的扩展程序栏中。 9. 点击Vue图标，您将能够打开Vue 3 Devtools面板，并对您的Vue 3项目进行调试和检查。 以上就是下载Vue 3 Devtools的步骤。请注意，由于Vue 3 Devtools是Chrome浏览器的扩展程序，并且需要在Vue 3项目中进行调试和检查，因此在使用之前，请确保您正在使用Vue 3版本的项目。 ### 回答2： 要下载Vue 3 Devtools，您可以按照以下步骤操作： 第一步，打开Vue 3项目所在的终端或命令行界面。 第二步，在终端中通过npm命令全局安装最新版本的Vue CLI。您可以使用以下命令执行安装： ``` npm install -g @vue/cli ``` 第三步，在安装Vue CLI完成后，您可以使用以下命令创建一个新的Vue 3项目： ``` vue create my-vue-project ``` 这将使用默认设置创建一个新的Vue 3项目，并在项目文件夹中初始化所有必要的文件和依赖项。 第四步，进入项目文件夹： ``` cd my-vue-project ``` 第五步，运行以下命令以安装Vue 3 Devtools插件： ``` vue add vue-next ``` 这将安装Devtools插件并将其添加到您的Vue 3项目中。 第六步，您可以使用以下命令来启动您的Vue 3项目： ``` npm run serve ``` 项目启动后，您可以访问http://localhost:8080（默认端口）在浏览器中查看您的Vue 3应用程序。 最后，您可以在浏览器的扩展程序商店中搜索并安装Vue 3 Devtools扩展程序，以便使用高级开发工具和调试功能。 总之，上述步骤将帮助您下载并安装Vue 3 Devtools插件，并在开发过程中提供更好的开发和调试体验。 ### 回答3： Vue 3 Devtools 是 Vue.js 官方提供的一个浏览器扩展程序，用于开发者在开发过程中调试和监控 Vue 3 应用程序。 首先，要下载 Vue 3 Devtools，可以访问 Vue.js 的官方网站或者 GitHub 页面。在这些地方，你可以找到 Vue 3 Devtools 的最新版本，并且可以根据你自己的浏览器进行选择。 在选择好对应的版本后，你可以点击下载按钮。下载完成后，你可以在你的浏览器的扩展程序页面中找到下载的文件。根据不同的浏览器，安装方法可能会稍有不同。 在安装完成后，你可以在浏览器的扩展程序栏中找到 Vue 3 Devtools 的图标。点击图标，你就可以打开 Vue 3 Devtools 扩展程序。 Vue 3 Devtools 提供了许多有用的功能，帮助开发者在开发过程中调试和监控 Vue 3 应用程序。其中包括：查看组件树结构、检查组件的 props 和状态、查看事件、性能分析等。 总之，下载 Vue 3 Devtools 非常简单，只需要前往 Vue.js 的官网或者 GitHub 页面，选择合适的版本进行下载。安装完成后，在浏览器的扩展程序中打开 Vue 3 Devtools，你就可以开始使用它提供的强大的调试和监控功能来优化你的 Vue 3 应用程序了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值