Google浏览器怎么添加vue-devtools拓展工具

最新推荐文章于 2024-08-12 17:55:51 发布
最新推荐文章于 2024-08-12 17:55:51 发布
阅读量2.7k 收藏 4
点赞数 2
分类专栏： Vue 技术栈 文章标签： vue-devtools vue Google插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaimo313/article/details/107437572
版权

步骤

1、下载github上面的源码

git clone https://github.com/vuejs/vue-devtools

如果代码下载不下来，可以下载zip包（我安装的5.1.1的，5.3.3安装依赖会报错）

比如：Error: Cannot find module ‘@vue-devtools/build-tools’

点击下载：

在这里插入图片描述

2、找到vue-devtools文件夹，在目录下安装依赖包

npm install或者cnpm install

在这里插入图片描述

3、安装完依赖，找到chrome文件复制一份改名vue-devtools_5.1.1

在这里插入图片描述

4、拖进去扩展程序

chrome://extensions/

在这里插入图片描述

5、重启一下浏览器，按f12，打开调试工具

在这里插入图片描述

下载crx

这一种简单暴力

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

在这里插入图片描述

下载好以后，拖进拓展工具那边就行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFkndSiG-1595088133590)(2EF74AF74A98480487B0BAD01363A8F0)]

凯小默
关注
专栏目录
谷歌应用商店vue拓展工具
02-23
帮助理解vue数据，vue使用中查看数据变化
谷歌vue调试扩展插件 vue-devtools
04-29
谷歌 vue 必备调试插件，添加说明：扩展插件-加载已解压的扩展插件
vue-tools踩坑日记|vue-tools的安装|vue-tools安装配置指南
最新发布
Wilelm的博客
08-12 556
只是想自己配个浏览器插件工具，结果打包遇到各种问题，看了2个帖子，结合帖子内的内容来调整的冲突之后也试了类似的忽略文件还是不行。其他版本都因为我的vue脚手架安装不了依赖，要么就是镜像问题，旧的淘宝镜像已经没有证书了，这里我用新的。然后npm run build是build不了的，要安装安装 yarn 工具。1、首先去下载5.1.1版本的vue-tools。用git的话要切换一下分支，我用的小乌龟切换。然后安装依赖，npm i 会出现安装错误问题。淘宝镜像安装，这个是旧的地址。目前我下载的是5.1.1。
谷歌浏览器安装vue-devtools扩展插件
风如白话的博客
10-14 751
谷歌浏览器安装vue-devtools扩展插件 介绍： 新版vue-devtools下载下来由于缺少shells文件夹，导致安装始终无法成功。 本文提供Git仓库地址，可下载vue-devtools5.1版本，内部包含shells文件夹，打开shells文件，选择chrome文件夹，拖动到谷歌浏览器扩展插件添加页面即可。 下载： 打开git仓库下载 步骤： 效果： ...
谷歌浏览器 vue插件工具
04-29
vue谷-歌插件，开发帮手vue-devtools Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件
安装google vue插件
weixin_42524016的博客
08-10 175
实测有效 装了两天快哭了孩子快哭了 获取方法 git clone -b v5.1.1 https://github.com.cnpmjs.org/vuejs/vue-devtools 这里是重点使用v5.1.1.1 安装 npm i 或 cnpm install 构建 npm run build 下来就在vhrome中添加就好了 路径为vue-devtools\shells\chrome ...
chrome插件 vue-devtools离线安装包
04-27
6. 成功加载后，Vue Devtools 将出现在Chrome浏览器的开发者工具中，你可以在打开的Vue应用中使用它进行调试。 Vue Devtools 提供的主要功能包括： - **组件树**：显示应用程序的组件层级结构，可以查看每个组件的...
vue-devTools安装 谷歌浏览器拓展程序
09-05
Vue.js devtools是基于google chrome（谷歌）浏览器的一款调试vue.js应用的开发者浏览器扩展 内涵vue.js.devTools插件 及其安装方法 手动加载到chrome浏览器的扩展程序中
vue-devtools-dev
02-13
7. **离线安装**：考虑到某些用户可能无法访问到Google Chrome网上应用店，提供vue-devtools-dev这样的压缩包下载方式，使得用户可以在离线环境下安装Vue Devtools，这极大地拓展了其使用范围。 安装Vue Devtools ...
安装vue-devtools的过程中遇到问题，以及最后解决问题正确安装
Girasol_YRR的博客
02-25 965
我在安装vue-devtools的过程中遇到的问题 所参照的安装教程：https://blog.csdn.net/cx_carol/article/details/106874788 （按照这个教程安装是没有问题的，大家可以看看哈！） 我做的操作： 1、下载devtools工具安装包 选择master分支我下载的是.zip后缀的压缩包（下载完了记得一定要解压）， 我的目录：D:\vue\vue-devtools-master 一、第一次安装 步骤1：在解压后的D:\vue\vue-devtools-mast
Chrome 浏览器安装Vue Devtools调试工具 (详细教程)
m0_67265654的博客
03-08 1359
Chrome 浏览器安装Vue Devtools调试工具 1. 首先下载Vue Devtools调试工具 2. 复制网址，在浏览器打开按照图示操作 3. 下载成功后解压即可，如下图所示 4. 解压后打开cmd命令切换到G:Vue Devtools工具 ue-devtools-5.1.1路径下（你们安装的路径自己切换） 5. 切换命令成功后使用淘宝命令cnpm install下载（尽量用淘宝镜像下载快速些），下载成功如下图所示 6. 然后在cnpm run build 如下图所示 7. 然后在打开shell
自己构建的vue谷歌浏览器扩展程序.rar
12-10
在google浏览器扩展工具管理中打开\vue-devtools-dev\shells\chrome,点击确定即可安装 真的很好用,当然你也可以去github下载源码自行编译,但是初学者还是下载我的比较好,第一你自己编译的未必能用,第二很浪费时间,真的很浪费时间 vue Devtools.亲测可用,安装过程请自行百度,并不复杂,按照步骤很容易安装, vue Devtools.亲测可用,安装过程请自行百度,并不复杂,按照步骤很容易安装.
vue devtools3.1.6 chrome扩展离线版(crx)下载
12-04
vue devtools3.1.6 chrome扩展离线版(crx)下载,刚刚从墙外面下回来的,亲测可用，希望对大家有用。
chrome浏览器添加vue-devtools扩展
weixin_30680385的博客
01-14 504
1,在百度网盘中下载压缩包,网盘地址:https://pan.baidu.com/s/1i6UdvCD，密码：nvfe 2，将压缩包解压到F盘，F:\chromeVue插件 3，复制文件地址，F:\chromeVue插件\vue-devtools-master 4，打开cmd命令，进入F盘，然后进入到vue-devtools-master文件中，命令：cdF:\chromeVue插件\v...
Devtools下载添加到谷歌扩展程序
m0_60823776的博客
04-26 469
然后点击tags 进到这个页面往下滑然后一直下一页找到v5.1.1版本 用vscode打开刚刚下载解压好的文件夹，顺便检查一下有没有shells这个文件夹 然后先执行 npm install 上面执行完后，再执行 npm run build 然后打开谷歌扩展程序，再打开 开发者模式，点击加载已解压程序 找到刚刚下载好的 devtools-5.1.1 文件夹，点击进去，再点击进去 shells 文件夹 然后看到 chrome文件夹，然后点击 选择文件夹 ...
尚硅谷vue-D1211 vue拓展工具
weixin_40631386的博客
06-16 185
扩展程序：
vue扩展工具安装-vue-devtools，学习前端开发经验
m0_61549781的博客
04-02 1028
使用git下载：打开git ： 切换 git f: 切换到你所创建的文件夹下二、安装//切换到此目录下// 切换到主分支// 输入npm install 恢复// 安装过程出现错误可能是缓存问题，清除缓存就好了// 打包上线 生成dist目录// 出现以下成功DONE Compiled successfully in 13911ms 下午3:48:22修改配置。
Vue开发者工具扩展链接
weixin_46481307的博客
06-15 459
下载链接
Chrome浏览器 安装Vue插件vue-devtools
A_aspectJ的博客
03-30 5017
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
vite-plugin-vue-devtools与浏览器的vue-devtools插件有什么区别
07-13
Vite-plugin-vue-devtools是一个针对Vite构建系统的Vue.js应用特别设计的插件，它的作用是让Vue DevTools（浏览器内置的开发者工具插件）能够更好地与Vite环境集成，尤其是在热更新（Hot Module Replacement，HMR）模式下。这个插件优化了Vue DevTools的性能，使其能在Vite快速启动和切换模块时仍能实时显示应用的状态。 而浏览器自带的Vue DevTools插件则是个通用工具，适用于所有基于Vue的Web应用，无论它们是否使用了像Vite这样的现代前端构建工具。Vue DevTools可以监控Vue组件的状态、查看数据绑定、追踪组件生命周期等，但在非Vite环境中，开发者可能需要手动设置DevTools的附加选项或处理跨域问题。 总结来说，Vite-plugin-vue-devtools是Vite生态下的补充，专为Vite优化，而标准的Vue DevTools则更为通用。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凯小默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值