devtools调试工具的安装,用于vue项目

最新推荐文章于 2024-07-29 10:48:55 发布
原创 最新推荐文章于 2024-07-29 10:48:55 发布 · 296 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何从GitHub下载Vue开发者工具并进行安装配置。步骤包括下载源码、使用cnpm安装依赖、编译项目文件及在Chrome中加载扩展程序。

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

2.将文件解压到一个文件夹，找开cmd并进入这个文件夹，安装项目所需要的npm包  cnpm install

3.编译项目文件:  cnpm run build

4.添加至chrome浏览器

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。

 

 

5.如果F12没有出来vue栏，则按下面操作

6.最终效果图：

 

Vue - vue-devtools 安装
qq_43612151的博客
02-05 1535
一、vue-devtools仓库地址 https://github.com/vuejs/vue-devtools.git 二、把仓库clone到本地打包 （1）git clone https://github.com/vuejs/vue-devtools.git （2）cd vue-devtools （3）非常重要的一步，确认是否在master分支，没有就切换到master分支 （4）npm i 安装依赖模块 （5）npm run build 打包 （6）在chrome的地址栏中输 chrome://ext
vue-devtools安装
jianjian_5201314的博客
10-30 254
vue的调试工具vue-devtools 的安装和使用 安装: 1.到github下载： #git clone https://github.com/vuejs/vue-devtools 2.进入vue-devtools目录下切换到主分支安装依赖包 #cd vue-devtools #git checkout master #npm install 依赖包下载完后执行npm run build npm run build 4.译打包成功后会在shells下生成chrome文件夹。..
vuedevtools安装
03-02
vuedevtools安装中chrome扩展，里面包含了安装的方法
vue - devtools 安装
最新发布
mon_star°的博客
07-29 2542
vue是现在比较火的一个框架，加上去年vue3的发布，更推动了vue一个层级vue开发项目，自然少不了他的调试工具,这个非常好用，对vue开发者来说，这简直是福音，下面我们一起来看一下他的安装使用吧。方式一：通过 Chrome 应用商店安装简单方便但是需要梯子方式二：通过离线安装包安装方式三：下载源码编译安装。
Vue DevTools调试工具的使用
11-27
Vue DevTools是一款强大的开发者工具，专门用于调试基于Vue.js框架构建的应用程序。它提供了一种直观的方式来检查组件的层级结构、查看属性值、监听事件、触发生命周期钩子以及修改状态，极大地提升了Vue开发者的...
精选资源
vue最新devtools，vue3的调试工具
10-27
Vue Devtools 为此提供了专门的检查和调试工具，可以查看组件的setup函数以及使用到的ref和reactive对象。通过这些工具，开发者可以清晰地看到数据的依赖关系，以及组件内部的状态变化。 此外，Vue 3中的Teleport...
前端 Vue 调试工具Vue.js Devtools，浏览器调试Vue项目
03-22
用于在开发Vue项目时在浏览器进行调试，方便开发，清晰开发。ue.js Devtools 是专为 Vue.js 开发者 设计的浏览器插件，它提供了丰富的功能，帮助开发者更轻松地调试、分析和优化 Vue.js 应用。
vue调试工具 vue-devtools2.6
11-18
在日常开发中，Vue Devtools是一个不可或缺的工具，它极大地简化了Vue应用的调试过程，提高了开发者的工作效率。使用它，你可以更轻松地找出应用中的错误，理解组件之间的交互，以及优化应用性能。无论你是Vue初学者...
VUE 配置vue-devtools调试工具及安装方法
10-17
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。...这篇文章主要介绍了VUE 配置vue-devtools调试工具及安装步骤 ,需要的朋友可以参考下
vue-devtools的安装
mengran_code的博客
09-24 372
(前提是安装了node)。新建一个文件夹，然后执行。工程，就能在控制台看到。谷歌浏览器的扩展程序。
调试神器VUE-DEVTOOLS安装
weixin_45158258的博客
09-19 274
2.1 进入官网下载源码：https://github.com/vuejs/vue-devtools。VUE3 vue-devtools正确安装，亲测有效！找到以下目录文件，安装至Chrome浏览器扩展程序。正确的安装方法有两种：（以Chrome浏览器举例）代码执行一段时间后，没有反应，终止即可。2. gitHub下载源码，编译安装。1. Chrome网上应用商城下载。2.2.1 安装yarn依赖管理工具。2.2.2 安装依赖。安装成功后，终止即可。
vue-devtools vue开发调试神器
weixin_30784945的博客
07-12 887
前言： 由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。 但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 一、下载chrome扩展插件 GitHub下载地址： https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址：http://npm.taobao.org...
vue devtools安装
weixin_39520640的博客
03-24 227
1、到github下载：https://github.com/vuejs/vue-devtools 2、在vue-devtools目录下安装依赖包： npm i 3、修改shells->chrome->manifest.json文件 把"persistent":false改成true 4、打包 npm run build 5、打开谷歌浏览器，设置—>扩展程序，勾选开发者模式...
轻松安装Vue调试工具——Vue-Devtools
### Vue.js开发调试工具 - Vue-Devtools Vue-Devtools 是一个专门为 Vue.js 开发的浏览器调试扩展，它提供了直观的界面，用于调试 Vue.js 应用程序。开发者可以通过 Vue-Devtools 查看组件层级，监控组件状态，检测...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值