如何安装vue-devtools，避免很多坑。

最新推荐文章于 2024-08-12 17:55:51 发布
最新推荐文章于 2024-08-12 17:55:51 发布
阅读量674 收藏 1
点赞数 6
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44378458/article/details/121823981
版权

首先我相信大家在百度时，如何安装vue-devtools,会看到很多文章，然后进入github去下载项目代码，这时候文章会说要切换分支，然后再运行 npm install 时，项目依赖下不下来等等各种问题，我是经常遇到，所以我花了点时间，把这个插件打包后，放到了我的开源仓库里，方便大家下载，下载下来后直接可以拖入浏览器中使用。

现在我教大家如何使用这个东西！

这是我的码云链接

// 使用时 输入 git clone + '地址'
https://gitee.com/susu-from-the-other-world/vue-devtools-5.3.3.git

拷贝下来后是这样的一个文件夹
在这里插入图片描述
打开文件目录是这样子的
在这里插入图片描述
现在告诉大家使用方法！

1.打开谷歌浏览器右上角三个点
在这里插入图片描述
2.选择更多工具
在这里插入图片描述
3.选择扩展程序
在这里插入图片描述
4.打开开发者模式
在这里插入图片描述

5.直接选择加载已解压的扩展程序按钮，直接拖入文件夹即可使用
在这里插入图片描述

Hands_susu
关注
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6961
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
Vue-DevTools安装教程.docx
08-18
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。本文件Vue-DevTools插件的详细安装过程
vue-devtools安装教程（简单易上手）
热门推荐
小白_xm
03-23 2万+
Vue-devtools安装教程 备注：在安装配置Vue-devtools过程中，很多博客上基本上都要求去github官网下载vue-devtools-dev压缩包。下载并解压该压缩文件后，便以管理员的方式打开命令行窗口，然后利用npm进行intsall（命令行：npm install），接下来输入npm install bulid。当然，利用这种方法有一个前提，便是要在此之前先安装好npm，要想安装npm，最便捷的方法是下载一个集成的node.js，而前提是要有一定的node基础。在通过上述办法来安装vu
vue-tools踩坑日记|vue-tools的安装|vue-tools安装配置指南
最新发布
Wilelm的博客
08-12 597
只是想自己配个浏览器插件工具，结果打包遇到各种问题，看了2个帖子，结合帖子内的内容来调整的冲突之后也试了类似的忽略文件还是不行。其他版本都因为我的vue脚手架安装不了依赖，要么就是镜像问题，旧的淘宝镜像已经没有证书了，这里我用新的。然后npm run build是build不了的，要安装安装 yarn 工具。1、首先去下载5.1.1版本的vue-tools。用git的话要切换一下分支，我用的小乌龟切换。然后安装依赖，npm i 会出现安装错误问题。淘宝镜像安装，这个是旧的地址。目前我下载的是5.1.1。
vue中devTools插件安装教程
weixin_62897746的博客
10-01 7545
为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试
Vue的devtools安装教程
wytccc的博客
11-24 1149
打包成功之后，进入packages/shell-chrome，记事本打开manifest.json文件，将persistent改成true，保存。打开一个引入了Vue.js的html页面，F12就能看到增加了一个Vue的选项，以后在编写Vue代码的时候，可以在这里快速的调试代码。① 如果使用npm run build打包的话，会报错如下，要求使用yarn run build来打包。安装yarn（用npm在打包的时候会失败，使用yarn可以打包成功）安装依赖（时间挺长，耐心等待）去github上拉取工具包。
vue devtools的安装与使用教程
12-08
一.在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三.用你的npm中进入该文件夹下 四.依次输: 1:npm install 2:npm run build         (这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图) 五：修改shells>chrome文件夹下的mainifest.json 中的persistant为true 六：我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells>
如何定位内存泄露（垃圾回收 DevTools NodeJs）
HZFEStudio的博客
10-30 677
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview 完整高频题库阅读地址：https://febook.hzfe.org/ 相关问题 垃圾回收机制 回答关键点 垃圾回收 DevTools 内存泄漏是指不再使用的内存，没有被垃圾回收机制回收。当内存泄漏很大或足够频繁时，用户会有所感知：轻则影响应用性能，表现为迟缓卡顿；重则导致应用奔溃，表现为无法正常使用。为了避免内存泄漏带来的不良影响，需要对垃圾回收机制进行了解，掌握内存泄漏分析方法，完善线上相关监控
vue_devtools调试工具
06-27
安装 Vue DevTools 很简单，只需在浏览器的扩展商店搜索 "Vue.js devtools" 并安装即可。对于开发环境，通常需要开启 Vue 的 debug 模式，而生产环境则不建议使用 Vue DevTools，以避免暴露敏感信息。 使用 Vue ...
vue dev-tools 5.3.3 for chrome
01-19
在"shell-chrome"这个压缩包文件中，很可能包含了Vue DevTools扩展的安装包，用于安装到Chrome浏览器中。安装完成后，只需在开发模式下运行Vue应用，就可以在浏览器的开发者工具中找到Vue DevTools，开始你的便捷...
vue官方vue-cli构建的vue项目结构分析
saucxs
02-20 601
一、概要 vue现在在很多公司会大量使用，研究一下vue-cli脚手架构建项目的项目结构，有助于理解vue。 博客首发地址：https://www.mwcxs.top/page/570.html 使用vue-cli脚手架搭建vue项目的具体步骤如下： npm install -g vue-cli cd E:(跳转到项目目录) vue init webpack vueproject (vu...
vuedevtools安装
03-02
vuedevtools安装中chrome扩展，里面包含了安装的方法
vue调试工具vue-devtools安装及使用方法
12-12
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把”persistent”:false改成true  4.编译代码 npm run build 5.扩展Chrome插件 Chrome浏览器 >  更多
vue-devtools 安装教程
huangpb的博客
04-05 808
这里介绍两种安装vue-devtools 的方式。 方式一：通过谷歌应用商店安装vue-devtools 扩展程序 方式二：把本地已有的扩展程序文件添加到谷歌浏览器的扩展程序里 这种方式适用于无法打开谷歌应用商店的同学。 1. 先在收藏猫插件点击“下载插件手动安装”下载 vue-devtools 扩展插件。 下载下来的文件是以 .crx 为扩展名的，Chrome的“扩展程序”都是以 .crx 为扩展名。 2. 进入谷歌浏览器的扩展程序页，直接把刚才下载的扩展程序文件拖进去即可。 ...
Vue-Devtools 安装教程
weixin_47607441的博客
07-26 289
Vue-Devtools 安装教程
vue-devtools安装教程 （Chrome浏览器）
Odyssey_kd的博客
03-03 2454
2024年最新安装vue-devtools方法
vue-devtools安装使用
CIA的博客
11-01 584
安装使用： 1、下载vue-devtools。 2、进入google浏览器，点击更多工具，扩展程序 3.点击右上角开发者模式 4、点击左上角“加载已解压的扩展程序” 5、找到解压文件的目录，选择shells下的chrome目录。点击“选择文件夹”按钮 6.此时插件已安装成功 7、使用时，运行vue的程序后，打开控制台，选择vue，就可以看到如下画面 ...
mac 安装vue-devtools
12-10
以下是在Mac上安装vue-devtools的步骤： 1.首先，确保你已经安装了Node.js和npm。如果没有，请先安装它们。 2.打开终端并输入以下命令来全局安装vue-cli： ```shell npm install -g vue-cli ``` 3.接下来，输入...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值