给谷歌浏览器安装vue调试工具:vue-devtools

最新推荐文章于 2026-05-27 17:28:51 发布
原创 最新推荐文章于 2026-05-27 17:28:51 发布 · 999 阅读 · 3
本文详细介绍了如何从源码拉取Vue DevTools，通过npm/cnpm/yarn安装并构建，以及如何在Chrome中添加和使用此扩展。重点展示了实例操作，适合前端开发者提升开发效率。

安装vue-devtools

一、拉取项目

vue-devtools：git地址（master分支）
非master分支在build的时候会报错。

二、install、build

1、打开cmd进入项目目录，可以选择npm/cnpm/yarn 进行install；如果有类似503等错误可能需要删掉node_modules尝重试几次。
在这里插入图片描述

npm install

cnpm install

yarn install

2、然后输入

npm run build

cnpm run build

yarn run build

三、添加扩展

1、打开Chrome扩展页面（更多工具> 扩展程序）
2、打开右上角“开发者模式”
3、加载已解压的扩展程序

标签
#vue-devtools
最低0.47元/天 解锁文章
前端同学必备：教你如何安装、使用Chrome的vue-devtools插件
04-04 6961
Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。
2024年React进阶（一）：学习资料汇总_react 最新学习资料，前端开发基础
2401_84437170的博客
05-04 458
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件c=reactjs全网独播-价值千万金融项目前端架构实战。
【前端】Vue DevTools 使用第三方编辑器配置与问题解决方案
最新发布
weixin_46764244的博客
05-27 435
echo off:: 替换为你的编辑器路径。
一步步指导：在Chrome中安装Vue插件vue-devtools
小透明的博客
03-28 5473
Vue.js是现代Web开发中最流行的前端框架之一，它以其轻量级、高性能和易于理解的设计理念受到开发者的喜爱。为了更高效地开发和调试Vue应用，Vue.js官方提供了一个强大的开发工具——vue-devtools。
vue-devtools的安装与使用
热门推荐
weixin_43843572的博客
05-26 8万+
vue-devtools的安装与使用
vue-devtools-简介、下载、安装、配置、使用
记录和分享属于我的“IT”时光。
03-21 3万+
vue-devtools-简介、下载、安装、配置、使用
谷歌浏览器安装 vue 调试工具 vue devtools
悟世君子的博客
12-10 1545
谷歌浏览器安装 vue 调试插件 vue devtools，对于调试 vue 项目非常方便，本文介绍如何安装 1、在 github 下载vue devtools 这里可以使用 git 克隆 git clone https://github.com/vuejs/vue-devtools 或者直接到网站下载 vue devtools 插件地址：https://github.com...
如何在谷歌中安装VUEX调试工具（谷歌浏览器中安装 vue调试工具 vue-devtools）
leilei__66的博客
04-14 6089
如何在谷歌中安装VUEX调试工具（谷歌浏览器中安装 vue调试工具 vue-devtools） 本次介绍了两种方法，第一种方法略微复杂，想追求效率的请查看第二种. 如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然不能算是一个合格的vue开发者. vue-devtools 开发工具能帮我查看当前组件的显示状态和 追踪vuex中数据状态 能帮我们的开发达到一个事半功倍的效果,无论你以后是测试数据还是检查BUG都会让你一目了然。 1.按照网上的指示安装的 首先先访问 git地址拿到源码 http
在谷歌浏览器中安装vue调试工具vue-devtools
杂货铺
08-12 2701
在谷歌浏览器中安装vue调试工具vue-devtools 目录 在谷歌浏览器中安装vue调试工具vue-devtools 一、下载vue-devtools工具包 工具包git地址： https://github.com/vuejs/vue-devtools 分支选择master 二、安装依赖 到下载工具包目录下 cdvue-devtools-master cnpm install cnpm run build 注：第一次用cnpm有报错，用npm就好了 三、在谷歌浏览...
谷歌浏览器chrome安装vue调试插件Vue-Devtools
iechenyb专栏
03-09 3039
目录 1. 下载并解压Vue-Devtools 2. 打开谷歌浏览器的应用商店 3. 安装Vue-Devtools 4. 验证Vue-Devtools是否启动成功 1. 下载并解压Vue-Devtoolshttps://codeload.github.com/arcliang/Vue-Devtools-/zip/refs/heads/master 解压后得到 2. 打开谷歌浏览器的应用商店 谷歌浏览器访问 chrome://extensions/ 开启开发者模式 3. 安装Vue..
谷歌浏览器中安装 vue调试工具 vue-devtools
业余前端的职业经历
02-14 4084
如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然不能算是一个合格的vue开发者 vue-devtools 开发工具能帮我查看当前组件的显示状态和 追踪vuex中数据状态 能帮我们的开发达到一个事半功倍的效果 1.我按照网上的指示安装的 首先先访问 git地址拿到源码 https://github.com/vuejs/vue-devtools.git 下载代码...
YDOOK: 谷歌浏览器 chrome 安装 Vue官方辅助调试工具 vue-devtools 详细安装教程与步骤
YDOOK
12-02 705
YDOOK: 谷歌浏览器 chrome 安装 Vue官方辅助调试工具 vue-devtools 详细安装教程与步骤 1. 如果您的电脑可以连接网外，比如谷歌网址，可以直接在 chrome 的拓展程序部分 搜索添加 vue-devtools 插件： 2. 对于国内用户而言，大多数情况是，如果您的电脑不可以连接网外，比如谷歌网址，需要直接在 GitHub 上面搜索下载 vue-devtools 插件，并在 chrome 应用它以使得它生效。 3. Vue-devtools 的官方下载 URL 为： Vue-D
vue 调试程序的安装（谷歌浏览器chrome的vuejs devtools 插件的安装）
weixin_34361881的博客
02-05 163
1.首先在GitHub上下载vue的调试程序插件 vue-devtools 地址：在github上下载压缩包并解压到本地，github下载地址：https://github.com/vuejs/vue-devtools 2.npm install 下载完成后打开命令行cmd进入vue-devtools-master文件夹， 1. npm install，安装依赖包； ...
在谷歌浏览器上安装vue调试工具【vue-devtools】
qq_37306041的博客
05-31 1243
1.下载vue浏览器插件 下载地址如下 点击下载 2.打开谷歌浏览器 更多工具->扩展程序-> 然后将下载好的压缩呀解压后为.crx文件 拖动到下面窗口即可 如图所示 最后浏览器重启后是这个样子 安装成功了 ...
谷歌浏览器安装Vue的调试开发工具扩展vue-devtools
qczxl520的博客
12-10 9384
想不想在浏览器的控制台中直接调试vue.js？那你一定要了解一下vue-devtools！ vue-devtools是用于调试 Vue.js 应用程序的浏览器开发工具扩展。 网上很多教程，都是下载源码，然后使用 npm，比较繁琐，下面教大家一种简单安装方法 安装 ① 在GitHub上下载浏览器扩展包 下载连接为：https://github.com/vuejs/devtools/releases ② 解压下载的扩展 ③ 打开谷歌浏览器扩展程序 第一种方式点击谷歌浏览器右上角的三...
谷歌浏览器vue调试工具vue-devtools安装及使用
Cinderellahh92的博客
04-14 516
1.到github下载：git clonehttps://github.com/vuejs/vue-... 2.在vue-devtools目录下安装依赖包： cmd中打开刚刚克隆文件的目录下： 在该目录下安装：npm install 3.修改manifest.json文件 将代码中 "persistent":false改成true 4.安装完成后同在该目录 npm run build 5.扩展Chrome插件 点击加载已解压程序按钮, 选择 vue-devtools ..
在谷歌浏览器中安装vue项目调试工具 vue-devtools详细安装步骤
baoziqyp的博客
02-04 898
谷歌浏览器安装vue-devtools插件 1. 前往GitHub下载vue-devtools文件 文件地址: https://github.com/vuejs/vue-devtools/tree/master 2.在GitHub中下载时一定要选择master分支，不然在安装依赖是出现问题，如图所示 3.文件下载完成后，进入dos窗口，然后使用cd命令进入刚下载的文件加的路径下，文件打开命令栏窗口 ，输入命令npm install 安装依赖 4.依赖安装完成后，运行命令 npm run build 进行
谷歌浏览器安装vue调试工具vue-devtools最全
叮当的猫猫的博客
07-27 1514
谷歌浏览器安装vue调试工具
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值