在Goole Chome浏览器上安装vue-devtools调试工具

最新推荐文章于 2026-04-21 10:07:32 发布
原创 最新推荐文章于 2026-04-21 10:07:32 发布 · 648 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
Chrome

当前文章被收录于：

Chrome
2 篇文章 0 人学习
订阅专栏 查看详情
Vue

当前文章被收录于：

Vue
1 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了如何在Google Chrome浏览器上安装并配置Vue.js的官方DevTools 5.1.1版本，包括下载、打包、manifest.json设置及实际使用的步骤。适合前端开发者进行调试工作。

在Goole Chome浏览器上安装vue-devtools调试工具

一、下载配置vue-devtools

1.下载：下载地址：https://github.com/vuejs/vue-devtools

因为最新版安装会出现问题，所以下载5.1.1版本

image-20211124174626170

2.进入解压后的目录下，打开终端依此执行

npm install  

npm run build

3.修改shells/chrome文件夹下的mainifest.json 中的persistant为true

image-20211124174801173

image-20211124172154045

三、使用chome加载vue-devtools

image-20211124175125634

image-20211124175219895

image-20211124175825823

四、测试

image-20211124180223816image-20211124180146641

标签
#java #数据结构 #开发语言
vue devtools
07-07
vue devtools
vue devtools chrome扩展离线下载
03-14
vue devtools chrome扩展离线下载，直接可以用，没毛病。
10分钟掌握Vue Devtools调试工具：从入门到精通的性能优化实战
最新发布
gitblog_00323的博客
04-21 907
Vue Devtools是一款专为Vue.js应用打造的浏览器开发调试工具，能够帮助开发者高效分析组件结构、追踪状态变化、优化应用性能。本文将带你从安装配置到高级性能分析，全面掌握这款开发神器，让你的Vue项目调试效率提升10倍！ ## 一、快速安装：3步开启Vue调试之旅 🚀 Vue Devtools提供多种安装方式，满足不同开发场景需求： ### 1.1 浏览器扩展（推荐新手） 主流
chrome--devtools Mac
08-03
chrome--devtools Mac
vue.js devtolls插件下载
小恶魔的博客
07-05 9685
vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用。
Vue调式工具——vue-devtools插件下载安装 手把手教程！
weixin_44042442的博客
02-25 1万+
下载安装vue-devtools工具插件 ；Chrome浏览器下载安装vue调试工具；vue调试工具安装
【Vue.JS】Chrome 调试工具 vue-devtools 离线安装
新青年1号
05-20 4965
使用 Chrome 浏览器运行 Vue 代码时，Chrome 会在控制台给出友好建议：下载 Vue Devtools 进行调试。 vue-devtool 是基于 Chrome 的一款调试神器。使用它开发 Vue，可以大幅度的提升开发效率。 首先，按照 Chrome 浏览器 console 提示，访问 github 地址。https://github.com/vuejs/vue-devt...
下载、编译、安装、使用 vue-devtools
weixin_59916662的博客
10-17 3万+
下载、编译、安装、使用vue-devtools
【免费下载】 vue-devtools 下载及使用指南
gitblog_09704的博客
10-17 1750
vue-devtools 下载及使用指南 【下载地址】vue-devtools下载及使用指南 vue-devtools 下载及使用指南 项目地址: https://gitcode.com/open-source-toolkit/7...
vue-devtools-简介、下载、安装、配置、使用
记录和分享属于我的“IT”时光。
03-21 3万+
vue-devtools-简介、下载、安装、配置、使用
Vue Devtools 插件下载、安装和应用
qq_20765533的博客
05-30 2899
Vue 开发者工具 Vuetools 插件安装，持续更新。
Vue devtools插件的快速下载和安装
DE的个人原创笔记
05-16 1885
超详细图文教程
Vue Devtools 插件安装
guoliduo的博客
06-03 1430
Vue Devtools 插件让我们在一个更友好的界面中审查和调试 Vue 项目,插件安装步骤: 1.下载devtools,百度网盘地址(地址永久有效,只要我还活着): 链接：https://pan.baidu.com/s/13Y1qeGDq_yNvlZuekV7iRg 提取码：0tam 2.进入谷歌浏览器开发者模式,2种进入方式: (1)谷歌浏览器访问： chrome://e...
下载安装vue-devtools
m0_45144737的博客
03-13 738
下载安装vue-devtools
下载并安装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的下载和安装——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,编译打包成功后会
Chrome（谷歌浏览器）安装Vue插件vue-devtools(最新版+图文详解附带免费下载地址)
m0_56245036的博客
08-13 8521
链接: https://pan.baidu.com/s/1L21kNwu8rp2fHkpz5Fwu-w?pwd=n5uu 提取码: n5uu。因为Chrome浏览器的扩展商城的一些问题，需要进行一些特殊操作，咱们废话少说。在浏览器地址栏输入chrome://extensions/然后把刚刚下载文件夹中的xxx.crx,拖入浏览器当中。不会拖可以看一下文件中的视频。实现去下载百度网盘下载。...
Vue的调试工具安装
qq_44741577的博客
02-02 2615
只有在含有Vue的网页中才有如下选项。访问极简插件官网搜索devtools。点击 Chrome 浏览器。
vue-devtools插件下载、安装
m0_51645333的博客
12-13 8766
进入极简插件网站，搜索 Vue Devtools，点击推荐下载，解压下载的文件，拖进chrome，完成安装
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值