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

已于 2022-10-28 19:27:17 修改
阅读量123 收藏
点赞数
分类专栏： vue 文章标签： js vue-devtools vue vue.js
于 2022-03-24 18:48:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/123718572
版权
0.参考FeHelper的下载过程

2022-02-22 FeHelper插件的安装

1.找资源,下载crx文件

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

5.常见使用场景

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

前端OnTheRun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
下载、编译、安装、使用 vue-devtools
weixin_59916662的博客
10-17 2万+
下载、编译、安装、使用vue-devtools
vue-devtools-dev下载
04-08
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
vue-devtools下载与使用
weixin_34233421的博客
11-06 212
使用vue-cli的同学肯定知道有一个Chrome调试工具——vue-devtool。但是在国内环境很难直接在Chrome商店下载得到，今天提供一个4.1.5版本的下载地址。链接： 网盘地址 提取码：ty1m 如果地址过期了，可以到csdn下载：csdn地址 1.安装 我们打开chrome的扩展程序，讲刚下载的文件拖进去，就可以安装了。 2.更改一些配置 首先打开chrome的开发者模式，然后允...
Vue调式工具——vue-devtools插件下载安装 手把手教程！
weixin_44042442的博客
02-25 4919
下载安装vue-devtools工具插件 ；Chrome浏览器下载安装vue调试工具；vue调试工具安装
Vue调试神器 vue-devtools 的安装（插件商店下载）
蓝胖子的博客
09-27 532
Vue调试神器 vue-devtools 的安装（插件商店下载）
vue-devtools
最新发布
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
vue-devtools-5.1.1.zip
04-23
在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。 使用方法 切换到根目录 cnpm install，然后 npm run build，再 修改shells\chrome 目录下的manifest.json 里面的 ...
vue-devtools-5.1.1
12-29
这个"vue-devtools-5.1.1"版本是Google开发的Vue DevTools的一个特定版本，主要用于支持Vue.js 2.x的应用。 Vue DevTools 5.1.1 版本主要特性包括： 1. **组件树视图**：展示应用中的所有Vue组件及其层级结构，...
vue-devtools安装工具包.zip
03-23
内附已用npm处理过的vue-devtools工具包，已配置过源码文件，直接拿来用即可。利用vue-devtools工具包安装vue-devtools的具体操作过程可查看博主主页文档，操作简单，便于上手。
Vue-Devtools--master_vue-devtools工具_
10-04
Vue-Devtools 是一款强大的开发工具，专为Vue.js框架设计，用于帮助开发者深度调试、监控和优化Vue应用。这款工具提供了一套直观的界面，让开发者能够清晰地看到组件树、状态变化、性能指标等关键信息，从而提高开发...
下载并安装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（笔记）
qq_44872773的博客
02-27 592
参考文章： https://blog.csdn.net/m0_48355180/article/details/119961302 安装笔记====================================== 1、访问github地址：https://github.com/vuejs/devtools下载安装包（zip） 链接：https://pan.baidu.com/s/1xZ7I0CwhHrVTbHLCosCNzw 提取码：nxv9 2、下载 3、进入到解压后的devtools-add-
超详细Vue Devtools的下载和安装——Vue的调试工具
热门推荐
沐小侠
01-11 6万+
在使用 Vue 时，我们推荐在浏览器上安装 Vue Devtools。vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用。 下载 Github下载地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1 解压下载的文件，在这里解压到D:/Vue下。 在命令行中切换到解压好的vue-devtools-5.1.1目录，使用cnpm install命令进行依赖安装。 依赖包下载完后执行npm run build,编译打包成功后会
Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
weixin_34061555的博客
01-29 633
在开发vue相关的项目时，使用vue devtools工具是一件极其有趣的事，你所有的操作都马上给你实时反馈。   然而有时候安装好的工具，在chrome中不显示。  在网上找过多次，一直没有找到有效解决方案，测试过很多复杂的方式，都没成功。 这次终于找到一个简单的解决方法，一定要记录下来：   ① F12关闭开发者模式 ② 刷新 ③ 然后再按F12就好了...
一分钟下载并安装vue-devtools（详细步骤）
Beatingworldline的博客
06-06 3650
一分钟教你安装Vue.js devtools
快速安装vue-devtools开发者调试工具免费安装方法
a1783118的博客
03-28 499
快速安装vue-devtools开发者调试工具免费安装方法
Edge chrome 浏览器插件vue-devtools安装教程（简单易上手）
暂时注销中.........
02-25 1687
3，点击vue菜单，即可看到左侧组件嵌套情况，右侧则可选择查看组件，vuex数据仓库,事件派发情况，vue-router，工具设置等等。1.使用之前必须对vue项目进行相关设置，在Vue加载之后设置立即设置Vue.config.devtools = true，6.进入shell文件夹，将构建出的chrome文件夹拖到chrome拓展程序页，点击确认，成功添加新的拓展程序。5.打开chrome浏览器，点击选项，更多工具，拓展程序，2.chrome浏览器按f12，即可看到vue菜单，
vue-devtools-简介、下载、安装、配置、使用
记录和分享属于我的“IT”时光
03-21 2万+
vue-devtools-简介、下载、安装、配置、使用
vue-devtools 下载 安装
09-06
要下载和安装 Vue Devtools，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 Vue.js 开发环境，包括 Node.js 和 Vue CLI。 2. 打开终端或命令提示符，进入您的 Vue 项目所在的目录。 3. 运行以下命令来安装 Vue Devtools： ```bash npm install -g @vue/devtools ``` 或者，如果您使用的是 yarn 包管理器，可以运行以下命令： ```bash yarn global add @vue/devtools ``` 4. 安装完成后，您可以运行以下命令启动 Vue Devtools： ```bash vue-devtools ``` 这将启动 Vue Devtools 应用程序，并在您的浏览器中打开。 5. 确保您的 Vue 项目正在运行中，然后单击浏览器中的 Vue Devtools 扩展图标。这将使 Devtools 连接到您的 Vue 应用程序并显示所有相关的组件、状态和事件信息。 现在您已经成功下载并安装了 Vue Devtools。您可以使用它来调试和分析您的 Vue.js 应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端OnTheRun

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

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

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

打赏作者

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

抵扣说明：

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

余额充值