Vue.js devtools 调试工具安装教程

最新推荐文章于 2024-04-30 10:00:00 发布
最新推荐文章于 2024-04-30 10:00:00 发布
阅读量421 收藏
点赞数
分类专栏： 日常 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29541381/article/details/119030862
版权

【傻瓜式安装】有博主已经install、run过了，直接用就好   👉傻瓜式安装链接

不过这有个缺点，这篇文章发表在2008年，并且Vue.js devtools的版本是3.1.5。

好了，进入正题 👇

一、下载压缩包

在官网上下载压缩包 https://github.com/vuejs/devtools#vue-devtools

二、解压

解压位置随个人喜好，我解压到了D盘。

三、下载依赖

打开cmd，并切换到 你的安装路径\devtools-5.1.1 下，并运行

cnpm install
or 
cnpm i  //简写

（

最低0.47元/天 解锁文章
一只Leona
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
下载、编译、安装、使用 vue-devtools
weixin_59916662的博客
10-17 2万+
下载、编译、安装、使用vue-devtools
图文详解vue.js devtools插件使用方法
xsq123的专栏
06-19 4万+
本文重点介绍Vue.js devtools使用方法，提供chrome插件直接安装和源代码安装两种方法，你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。
# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法
最新发布
段子手168的博客
04-30 3708
github 下载地址：https://github.com/vuejs/vue-devtools如下载：vue.js-devtools-4.1.3.zippage=9。
vue中devTools插件安装教程
weixin_62897746的博客
10-01 7479
为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试
前端 Vue 浏览器调试工具 Vue.js devtools 安装
qq_46490956的博客
08-29 3144
前端 Vue 浏览器调试工具 Vue.js devtools 安装
Vue.js devtools 6.5.1
04-18
Vue.js devtools 是一款用于 Vue.js 应用程序开发的浏览器扩展工具，它可以帮助开发者更轻松地调试和分析 Vue.js 应用。这个扩展提供了诸如组件树、状态管理器、事件触发、性能分析等功能，使开发者可以更好地理解和...
Vue.js devtools谷歌插件
03-14
总结起来，Vue.js devtools是Vue.js开发过程中不可或缺的辅助工具，它提供了丰富的功能，使得开发者能够在浏览器环境中对Vue应用进行深度调试，理解Vue的内部工作原理，进而提升开发质量和效率。如果你是Vue.js的...
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4 是一款专为Vue3开发者设计的谷歌浏览器扩展工具，它极大地简化了Vue应用程序的调试过程。这款工具能够帮助前端开发者深入理解Vue3的应用状态，实时追踪组件数据变化，定位并解决问题，提高...
Vue.js devtools 3.1.5
03-09
Vue.js Devtools是一款强大的前端开发工具，专为Vue.js应用程序设计，用于提升开发和调试的效率。这款插件在Chrome和360安全浏览器中均可使用，版本号为3.1.5，它包含了丰富的功能，帮助开发者深入理解Vue应用的运行...
Vue.js devtools(Vue3开发者工具插件)
01-21
Vue.js devtools是针对Vue3开发的浏览器扩展插件，它是前端开发者不可或缺的工具，尤其对于Vue项目的调试和性能优化至关重要。Vue3开发者工具提供了一种直观的方式，让我们可以直接在浏览器环境中查看和操作Vue应用...
vue-devtools.zip
11-07
在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。而Electron本来是应该预装好了vue-devtool的，奈何 electron-devtools-installer 这个库不知道有什么问题，故本资源可以为Electron开发封装vue-devTools拓展
vue-devtools v5.1.0.crx 最新版Chrome浏览器Vue调试插件
06-17
vuejs-devtools_v5.1.0.crx 最新版Chrome浏览器Vue调试插件，直接安装使用无需自己编译。安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的“vuejs-devtools_v5.1.0.crx”拖到Chrome上去即可安装。 如果安装的时候报错：程序包无效:"CRX_HEADER_INVALID"解决方法： 将扩展名.crx改为.rar解压出来，然后使用“加载已解压的扩展程序”进行安装。
Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决
热门推荐
goog_man的博客
01-13 6万+
这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题 所需的所有文件，链接：https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码：2yvc 一、vue.js插件下载 下载地址：vue.js插件下载； 点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发
超详细Vue Devtools的下载和安装——Vue的调试工具
沐小侠
01-11 5万+
在使用 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】全家桶之vue-devtools
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-08 7320
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
【前端】vue-devtools的详细安装讲解
分享记录开发中的问题，欢迎一起探讨！
11-24 4038
文章目录前言准备工作npmgit正式开始vue-devtools自定义版本编译细说 前言 vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。 相信很多小伙伴也非常想安装这个小插件，但是网上找了很多办法，不是这个模块找不到就是各种不行。这里针对不能在商店下载插件的小伙伴们提供一种方式，一步一步来就可以成功。 准备工作 npm 没有npm的小伙伴要去安装一个npm,搜索node.js官网 安装好node之后自然也就安装好了npm。设置npm的镜像地址
安装vue.js devtools工具
illlllllllllll的博客
02-08 212
第三：这一步初学者特别容易搞错，开启vuejs devtools程序之后，点击图标还是无法点亮图标。主要的原因是vuejs devtool必须要监视到页面是一个vue项目才能进行调试。3.进入vue-devtools\node_modules\vue-devtools\vender，修改manifest.json中的"persistent"值为true。创建一个vue程序，运行，按f12进入调试模式，这时候会发现有一个vue的选项。如果你看到这，恭喜你，看到全网解决这个问题的方法！5.重启浏览器即可生效。
vue.js devtools下载 安装 使用 全教程
06-02
Vue.js Devtools 是一个用于调试 Vue.js 应用程序的 Chrome / Firefox 浏览器扩展程序。下面是 Vue.js Devtools 的下载、安装和使用全教程： 1. 下载 Vue.js Devtools 您可以在 Chrome 和 Firefox 的扩展商店中找到 Vue.js Devtools，并从那里下载。 - Chrome 扩展商店：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd - Firefox 扩展商店：https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/ 2. 安装 Vue.js Devtools 下载完成后，您需要将其安装到浏览器中。在 Chrome 中，您可以将其拖放到扩展程序页面中；在 Firefox 中，您可以使用附加组件管理器安装它。 3. 使用 Vue.js Devtools 安装完成后，在浏览器中打开 Vue.js 应用程序，然后按下 F12 打开开发者工具。您应该可以在开发者工具中看到一个新的选项卡：Vue。 在 Vue 选项卡中，您可以看到 Vue.js 应用程序的各种信息，包括组件树、状态、事件和性能。您还可以在控制台中访问 Vue 实例，并使用 $vm0、$vm1 等命令引用它们。 希望这个全教程可以帮助您使用 Vue.js Devtools 进行调试！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值