Vue调试工具vue-devtools的安装

最新推荐文章于 2024-08-07 09:20:57 发布
最新推荐文章于 2024-08-07 09:20:57 发布
阅读量999 收藏
点赞数 1
分类专栏： 笔记 记录 文章标签： vue.js chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35066582/article/details/111084151
版权
本文介绍了如何安装Vue调试工具vue-devtools。通过访问特定网址下载crx文件，改后缀并解压，然后在Chrome浏览器的扩展程序设置中开启开发者模式，加载解压后的文件夹，即可完成安装。
摘要由CSDN通过智能技术生成

今天重新学习vue的时候，把之前没有安装的Vue调试工具vue-devtools给安装了一下，安装步骤如下：

1. 访问网址：https://chrome-extension-downloader.com/来到下面这个界面，找到Vue.js-devtools(v5.3.3)，点击下载到本地

2. 下载后的文价夹名为：Vue.js-devtools_v5.3.3.crx，后缀名为crx，那么如何解压这个文件呢？

3. 解压Vue.js-devtools_v5.3.3.crx文件：将Vue.js-devtools_v5.3.3.crx文件的后缀名直接改为rar或者zip即可，然后解压到当前文件中，如图

文件夹中的内容如下

4. 打开chrome浏览器，打开设置，找到扩展程序，将开发者模式打开，点

最低0.47元/天 解锁文章
EK.寒风
关注
专栏目录
【Vue】vue-devtools调试工具安装和配置
早睡早起长头发的博客
01-30 972
在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。2. 配置 Chrome 浏览器中的 vue-devtools。3. 使用 vue-devtools 调试 vue 页面。1. 安装 vue-devtools 调试工具。修改完配置项，须重启浏览器才能生效！
vue.js devtools5.3.3.crx
08-25
vue.js devtools5.3.3.crx vue.js devtools5.3.3.crx vue.js devtools5.3.3.crx
Vue.js Devtools 使用教程
最新发布
gitblog_00895的博客
08-07 873
Vue.js Devtools 使用教程 devtoolsvuejs/devtools: Vue.js 开发者工具，这是一个浏览器插件，可以安装在 Chrome 和 Firefox 等现代浏览器中，用于调试 Vue 应用程序，提供了组件树查看、状态快照、时间旅行等高级调试功能。项目地址:https://gitcode.com/gh_mirrors/de/devtools 项目介绍 Vue.js ...
Vue调试工具的安装
m0_53415205的博客
02-04 2969
Vue调试工具的安装 第一种方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、点击右上角按钮，勾选开发者模式 3、点击“加载已解压的扩展程序”按钮，选择解压后的chrome文件夹，或直接将解压文件拖入窗口，即可添加成功。 4、添加完vue-devtools扩展程序之后，浏览器打开vue项目便可调试， 安装包链接：https://pan.baidu.com/s/1WmYbIKMkXy9fKSQcD2hdsQ 提取码：poz7 第二种方法： 1.http
Vue的调试工具安装
qq_44741577的博客
02-02 640
只有在含有Vue的网页中才有如下选项。访问极简插件官网搜索devtools。点击 Chrome 浏览器。
vue调试工具——vue tools安装
fxnfk
05-16 6379
参考：https://www.cnblogs.com/yuqing6/p/7440549.html 从github下载zip：https://github.com/vuejs/vue-devtools，解压。 在vue-devtools目录下安装依赖包： cnpm install 修改manifest.json文件 在这个目录下：E:\迅雷下载\前端\vue\vue-devtools...
vue.js调试工具安装
鲁花花生油
05-09 460
1.vue官网 https://cn.vuejs.org/ 2.官网右上角的生态系统里下拉的官方仓库 3.找到vue-devtools 4.找到相对应的点过去，得翻墙才能访问到哦 5.点击添加，添加完刷新页面即可(我这里已经添加，所以显示删除) 6.有这个就成功了 完结，撒花 ...
vue调试工具vue-devtools安装及使用方法
12-12
在开发过程中，为了提高效率和精确调试，Vue 提供了一个强大的调试工具——Vue DevTools。这款工具允许开发者深入查看 Vue 应用的状态，包括组件树、数据、计算属性、依赖关系等。下面我们将详细介绍 Vue Devtools ...
VUE开发者工具，vue-devtools-4.1.4_0。
04-16
Vue.js 是一款流行的开源前端JavaScript框架，由尤雨溪创建，用于构建用户界面。Vue DevTools 是一个强大的浏览器扩展，专为Vue.js...如果你是Vue.js的开发者，安装并熟练使用Vue Devtools将极大提升你的开发体验。
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
vue 浏览器调试插件 vue-devtools V6.5.0
09-21
浏览器打开扩展管理页面，将文件拖拽进入浏览器这个页面即可进行安装
vue-devtools.crx下载
07-17
vue-devtools.crx下载,下载后加载到chrome中即可使用。
Vue的开发者调试工具（devtools5.3.4）安装
weixin_45204443的博客
04-15 4923
1.下载Vue的开发者工具 链接：https://pan.baidu.com/s/17u8tWbdHkwdp-53umieNlw 提取码：zlss （如果过期了，请评论区说一下） 2.安装开发者工具（Chrome和Egde浏览器） （1）在Chrome浏览器安装的方式： ①点击浏览器右上角三个点 ②点击更多工具--->点击扩展程序 ...
vue安装调试工具
我是一枚程序员
01-02 428
只需要下载这个压缩包，谷歌浏览器输入chrome://extensions/。把开发者模式打开，点击加载已解压的扩展程序，选择刚才解压缩的文件包即可，就是这么easy！记录下。 下载地址 链接：https://pan.baidu.com/s/1Is6_-4hLNu4xd9fmPW3UzA 提取码：qjy3 ...
vue调试工具vue-devtools的安装
seimeii的博客
04-29 1528
1.vue-detools是什么 1.vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试 2.这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 1.第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。 克隆方法：git clone https://github.com/vuejs/vue-devtools.git 2.第二步： 解压下载好的文件，进入到vue-devto
vue devtools调试工具安装（详细）
weixin_46911985的博客
02-06 2478
下载完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，进入此文件夹，将其中vender 文件夹下的 manifest.json文件 进行编辑，修改persistent 为 true，保存文件。最后将vender 文件拖至浏览器的扩展程序中，重启浏览器就可以使用了。打开浏览器找到扩展程序（以谷歌为例），并勾选开发者模式，点击出现的“创建一个空的文件夹，命名最好可以见名知意，复制目录后打开命令行。
安装vue 调试工具 devtools
qq_40410916的博客
08-17 162
首先进入官网 然后选择tag一个稳定版本下载包zip 在解压后命令执行 执行 yarn install 打包 yarn run build 在浏览器选择添加扩展
vue---调试工具vue-devtools安装和配置
厚积薄发.
08-12 3778
vue 的调试工具 vue-devtools 安装和配置。vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。Chrome 浏览器在线安装 vue-devtools注意：vue2 和 vue3 的浏览器调试工具不能交叉使用！点击游览器右上角三个小点、更多工具、扩展程序。点击左上角的 ”三杠“，然后点击 ”打开 Chrome 应用商店“3.进入以后......
Vue项目调试工具：vue-devtools安装及使用
xiaoge_586的博客
02-03 936
1、安装 a、下载vue-devtools压缩包 使用命令或者直接进入网址下载： 网址：https://github.com/vuejs/vue-devtools 命令：git clone https://github.com/vuejs/vue-devtools b、进入vue-devtools-master文件夹中，在vue-devtools目录下安装依赖包 cnpm install c、输入命令cnpm run build，生成最终的文件 npm run build d、修改参数文件：ma
vue调试工具vue-devtools安装及使用
05-10
Vue-devtools是Vue.js官方提供的调试工具，是一款基于浏览器的开发者工具，主要用于Vue应用程序的开发调试，提供了可视化的组件树形结构、数据展示、状态管理等功能，极大地提升了Vue开发效率。 安装： Vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值