vue.js开发神器devtools的安装方法

最新推荐文章于 2025-10-12 16:56:01 发布
原创 最新推荐文章于 2025-10-12 16:56:01 发布 · 3w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#devtools #vue

本文详细介绍了如何从GitHub上获取并安装Vue开发者工具的过程。包括clone项目、使用npm进行安装和构建、修改配置文件以及在谷歌浏览器中添加扩展程序的具体步骤。
欢迎访问我的个人博客 http://xiaolongwu.cn/

1、安装

  1. 去gitHub上clone项目，地址 https://github.com/vuejs/vue-devtools 【传送门】

  2. 下载好后进入vue-devtools-master工程 执行npm install —–>npm run build.

  3. 修改manifest.json 中的persistent为true。如下图

    这里写图片描述

  4. 打开谷歌浏览器设置—>扩展程序–>勾选开发者模式—>添加工程中的shells–>chrome的文件夹或者直接拖动shells–>chrome文件夹。到此就安装好了。如下图

    这里写图片描述

  5. 有人问那我为什么打开我的开发着模式看不到效果呢？

别人是这样的

这里写图片描述

而我是指这样的

这里写图片描述

那为什么呢？因为这个工具只能在vue项目的页面上显示出来，所以你还必须跑起来一个vue项目才能看到效果。
那就快点启动自己的vue项目去页面看看效果吧！

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

Vue.js 调试神器：Vue Devtools 安装与使用全攻略
bairuoqing的专栏
02-20 3497
Vue Devtools 是一款专为 Vue.js 应用程序设计的调试工具，支持 Chrome 和 Firefox 等主流浏览器。它可以帮助开发者查看组件树结构、监控组件状态、分析性能瓶颈，并支持时间旅行调试。Vue Devtools 支持自定义插件，可以通过扩展其功能来满足特定需求。Vue Devtools 是一款功能强大的调试工具，能够帮助开发者快速定位和解决问题，提升开发效率。通过本文的介绍，你已经掌握了 Vue Devtools 的安装和使用方法。
Vue - vue-devtools 安装
qq_43612151的博客
02-05 1534
一、vue-devtools仓库地址 https://github.com/vuejs/vue-devtools.git 二、把仓库clone到本地打包 （1）git clone https://github.com/vuejs/vue-devtools.git （2）cd vue-devtools （3）非常重要的一步，确认是否在master分支，没有就切换到master分支 （4）npm i 安装依赖模块 （5）npm run build 打包 （6）在chrome的地址栏中输 chrome://ext
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
Code P的博客
07-01 465
@[TOC]Vue工具篇-1、关于Windows环境下安装vue.js Vue-Devtools过程 一、安装Node.js和yarn 1、进入Node.js官网https://nodejs.org/en/download/，选择版本下载 2、然后一路一直点击安装即可，安装路径可以自定义选择 3、安装完成后，打开cmd,输入命令 node --version 出现如下页面即安装成功 --------------------------------- 我是一条分割线。。。。------------
Vue.js开发者必备调试工具Vuejs-devtools实战指南
最新发布
weixin_35257663的博客
10-12 1453
Vue.js Devtools 是专为 Vue 应用打造的浏览器调试利器，深度集成于 Chrome 开发者工具中，提供组件树、响应式数据流与生命周期的可视化追踪能力。其通过非侵入式方式实时监听 Vue 实例状态，显著优于传统调试，支持动态修改 data、回放 mutations、时间旅行等高级功能。在复杂 SPA 项目中，可快速定位状态更新延迟、组件通信异常等问题，极大提升开发效率与调试精度，已成为 Vue 生态不可或缺的标准工具链之一。
vuedevtools安装
03-02
vuedevtools安装中chrome扩展，里面包含了安装的方法
vue-devtools安装
jianjian_5201314的博客
10-30 247
vue的调试工具vue-devtools 的安装和使用 安装: 1.到github下载： #git clone https://github.com/vuejs/vue-devtools 2.进入vue-devtools目录下切换到主分支安装依赖包 #cd vue-devtools #git checkout master #npm install 依赖包下载完后执行npm run build npm run build 4.译打包成功后会在shells下生成chrome文件夹。..
vue - devtools 安装
mon_star°的博客
07-29 2522
vue是现在比较火的一个框架，加上去年vue3的发布，更推动了vue一个层级vue开发项目，自然少不了他的调试工具,这个非常好用，对vue开发者来说，这简直是福音，下面我们一起来看一下他的安装使用吧。方式一：通过 Chrome 应用商店安装简单方便但是需要梯子方式二：通过离线安装包安装方式三：下载源码编译安装。
vue-devtools 必备开发工具
热门推荐
大灰狼的小绵羊哥哥的博客
04-18 4万+
最近在研究vue单页面应用，一步一步用上全家桶，开发避免不了的就是调试工具，因为vue是进行数据驱动的，单从chrome里面进行element查看，查不到什么鸟东西，必须要进行对数据动向进行关查，那我就行一步一步教大安装 1.github下载地址：https://github.com/vuejs/vue-devtools 有git的同学直接 git clone https://gith
精选资源
Vue.js devtools 5.3.4 工具包 (npm 处理过，可以直接使用)
10-28
使用方法，请参考博文：...vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。
Vue基础教程（12）搭建开发与调试环境之安装vue-devtools：Vue调试神器vue-devtools安装指南：告别console.log，实现开发效率翻倍！
jxf_jxfcsdn的博客
09-26 541
还在用console.log笨拙地调试Vue应用？试试vue-devtools吧！这款浏览器插件能让你像查户口一样审查组件数据、追踪状态变化、甚至实时修改数据。本文将手把手带你搞定vue-devtools的安装与配置，从Chrome商店一键安装到手动编译源码的硬核操作，附赠常见坑点解决方案。最后通过一个TodoList实战示例，演示如何用插件快速定位数据流问题。掌握它，你的Vue调试水平直接从“石器时代”升级到“科幻模式”！
掌握Vue.js开发神器：谷歌浏览器Vue.js Devtools插件使用指南
除了Vue.js Devtools插件之外，还有其他一些与Vue.js开发相关的工具和资源，例如Vue CLI（一个基于Vue.js进行快速开发的完整系统），Vuex（Vue.js的状态管理模式和库），Vue Router（Vue.js官方的路由管理器）等。...
Vue.js Devtools：提升开发效率的Vue.js调试神器
资源摘要信息: "Vue.js Devtools是针对Vue.js前端框架开发的专用调试工具，它大大增强了开发者在使用Vue进行前端开发时的调试能力，提供了丰富的调试和性能监控功能。" Vue.js Devtools是专为Vue.js框架开发的...
vue-devtools的安装
mengran_code的博客
09-24 368
(前提是安装了node)。新建一个文件夹，然后执行。工程，就能在控制台看到。谷歌浏览器的扩展程序。
调试神器VUE-DEVTOOLS安装
weixin_45158258的博客
09-19 274
2.1 进入官网下载源码：https://github.com/vuejs/vue-devtools。VUE3 vue-devtools正确安装，亲测有效！找到以下目录文件，安装至Chrome浏览器扩展程序。正确的安装方法有两种：（以Chrome浏览器举例）代码执行一段时间后，没有反应，终止即可。2. gitHub下载源码，编译安装。1. Chrome网上应用商城下载。2.2.1 安装yarn依赖管理工具。2.2.2 安装依赖。安装成功后，终止即可。
vue devtools安装
weixin_39520640的博客
03-24 226
1、到github下载：https://github.com/vuejs/vue-devtools 2、在vue-devtools目录下安装依赖包： npm i 3、修改shells->chrome->manifest.json文件 把"persistent":false改成true 4、打包 npm run build 5、打开谷歌浏览器，设置—>扩展程序，勾选开发者模式...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值