2022-03-24 vue-devtools的下载和安装

快速安装与Vue项目应用：FeHelper插件教程
原创 已于 2022-10-28 19:27:17 修改 · 162 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #vue-devtools #vue #vue.js

于 2022-03-24 18:48:42 首次发布
本文详细介绍了如何在2022年2月安装FeHelper插件，包括从下载crx文件、添加至Chrome扩展、验证安装及在Vue项目中的使用，旨在提升开发效率。
0.参考FeHelper的下载过程

2022-02-22 FeHelper插件的安装

1.找资源,下载crx文件

在这里插入图片描述

2.打开谷歌浏览器的扩展程序页chrome://extensions/,把crx文件拖动到此页
3.重启浏览器,打开一个vue项目,可以看到F12多了一个vue栏,同时插件图标那里有vue图标亮起,即安装成功

在这里插入图片描述

4.查看vue项目的目录结构

在这里插入图片描述

5.常见使用场景

不用再频繁的console.log一个变量看看正常获取到了没有,
然后再注释掉,直接可以从vue-devtools界面一目了然

vue-devtools_vue-devtools官网_vuedevtoolschrome_vue-devtools_
10-03
安装Vue Devtools非常简单，只需在Chrome浏览器的扩展程序商店搜索“Vue Devtools”，然后点击添加到浏览器即可。在开发模式下运行Vue应用时，Vue Devtools会自动激活。在生产环境中，为了安全和性能原因，通常不...
vue-devtools-5.4.3-chrome
02-12
vue-devtools的安装和使用对于Vue.js社区来说是一个巨大的福音。它不仅提升了开发者的调试效率，也促进了开发者对Vue.js内部机制的深入理解和学习。随着Vue.js框架的不断成熟，vue-devtools也在持续进步，为开发者...
vue-devtools-dev下载
04-08
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
Vue调式工具——vue-devtools插件下载安装 手把手教程！
weixin_44042442的博客
02-25 1万+
下载安装vue-devtools工具插件 ；Chrome浏览器下载安装vue调试工具；vue调试工具安装
Vue Devtools的下载和安装
最新发布
qq_48932438的博客
07-31 1286
打开解压目录vue-devtools-master下的shells/Chrome/manifest.json文件，将代码"persistent":false改成"persistent":true，在解压目录下，运行npm run build命令，构建vue-devtools插件(node版本16)在这个目录，执行npm install命令进行依赖安装。
vue-devtools下载与使用
weixin_34233421的博客
11-06 248
使用vue-cli的同学肯定知道有一个Chrome调试工具——vue-devtool。但是在国内环境很难直接在Chrome商店下载得到，今天提供一个4.1.5版本的下载地址。链接： 网盘地址 提取码：ty1m 如果地址过期了，可以到csdn下载：csdn地址 1.安装 我们打开chrome的扩展程序，讲刚下载的文件拖进去，就可以安装了。 2.更改一些配置 首先打开chrome的开发者模式，然后允...
下载、编译、安装、使用 vue-devtools
热门推荐
weixin_59916662的博客
10-17 3万+
下载、编译、安装、使用vue-devtools
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
精选资源
vue-devtools-6.6.4-chrome
02-12
在本例中，文件名"vue-devtools-6.6.4-chrome"指明了这是一个特定版本（6.6.4）的Vue开发工具插件，专门用于Google Chrome浏览器。由于"描述"中提到它适用于Vue3，这意味着该版本的Vue-devtools支持Vue.js的第三个...
精选资源
vue-devtools安装包
06-04
此“vue-devtools安装包”正是为开发Vue应用程序提供的一种便捷方式，特别是对于Vue 3版本的支持，使得开发者能够更加高效地调试和优化他们的代码。 Vue DevTools 的主要功能包括： 1. **组件树**：展示应用中的...
下载安装vue-devtools
m0_45144737的博客
03-13 677
下载安装vue-devtools
Vue开发插件DevTools下载安装教程
2302_77610294的博客
03-28 997
6、打开chrome进入扩展程序，注意要打开开发者模式。7、把解压的CRX文件拖入至chrome扩展程序就ok了。2、点击进入官网，找到搜索。4、进入后点击推荐下载。
VueDevtools下载及安装
RicciLiu的博客
10-21 1332
关于Vue Devtools插件的扩展 本人现在在学习Vue脚手架的应用开发，过程中需要用到Vue Devtools插件，从大牛的博客中学到，用Git clone地址，但是克隆过来的文件无法build，卡在了这一步； 但我想，一个插件直接下载扩展不就可以了嘛，于是再找地址：https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201
Vue调试神器 vue-devtools 的安装（插件商店下载）
蓝胖子的博客
09-27 596
Vue调试神器 vue-devtools 的安装（插件商店下载）
vue-devtools安装
yun的博客
03-09 2221
第一步 到guthub上去下载安装包，地址：https://github.com/vuejs/vue-devtools/tree/master 注意这里是需要下载master分支的 下载成功后里面会有一个shells文件夹，说明是可用版本 第二步 然后输入npm install命令安装依赖 注意第一步时一定下下载master分支的，不然这里会报错 安装完成之后执行命令npm run build 第三步 打开谷歌浏览器，进入更多工具 > 扩展程序 点击加载已解压的拓展程序 > 选择vu
vue-devtools插件下载、安装
m0_51645333的博客
12-13 8647
进入极简插件网站，搜索 Vue Devtools，点击推荐下载，解压下载的文件，拖进chrome，完成安装
下载并安装vue-devtools（详细步骤）
m0_67401228的博客
03-09 2万+
1,访问github地址：https://github.com/vuejs/devtools下载安装包（zip）（之前是dev和master分支，现在没有了，现在找的这个分支能用）； 2，进入到解压后的devtools-add-remote-devtools包中，在文件夹路径中打开cmd窗口，执行npm i（如果慢的话可以使用cnpm淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org） 3,然后执行npm run bu
【免费下载】 vue-devtools 下载及使用指南
gitblog_09704的博客
10-17 1641
vue-devtools 下载及使用指南 【下载地址】vue-devtools下载及使用指南 vue-devtools 下载及使用指南 项目地址: https://gitcode.com/open-source-toolkit/7...
轻松安装使用vue-devtools调试chrome中的Vue应用
vue-devtools是专为Vue.js开发的调试工具插件，它允许开发者在使用Chrome浏览器进行前端开发时，对Vue.js应用进行更加直观和有效的调试。通过它，开发者能够深入Vue组件的层级结构中，实时查看和修改数据，观察组件...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值